手牵手学习微信小程序之常用知识点

知识点"/>

手牵手学习微信小程序之常用知识点

前言

再小的个体，都有自己的品牌

开始

• 小程序单位rpx

1、小程序中 不需要主动来引入样式文件
2、需要把页面中某些元素的单位 由px 改成 rpx2.1、设计稿 750px750px = 750rpx1px = 1rpx2.2、把屏幕宽度改成 375 rpx275px = 750rpx1px = 2rpx1rpx = 0.5px3、存在一个设计稿 宽度414 或者 page3.1、设计稿page 存在一个元素 宽度100px3.2、拿以上的需求去实现 不同宽度的页面适配page px = 750rpx1px = 750rpx / page100px = 750rpx * 100 / page
4、利用一个属性 calc属性 css 和 wxss 都支持 一个属性4.1、750 和 rpx中间不要留空格4.2、运算符的两边也不要留空格示例：view {height：200rpxfont-size:40rpxbackground-color:#f00width:calc(750rpx * 100 / 375)
}

• 样式引入@import

1、引入的代码是通过@import来引入
2、路径只能写相对路径示例：@import "../../styles/common.wxss"

• 使用less

1、针对vscode编辑器
2、在插件商店下载Easy LESS
3、vscode设置settings.json中添加以下代码"lesspile":{"outExt":".wxss"}
4、最后新建.less文件正常编写，会生成.wxss文件

• 封装请求

// 新建request.js文件
// 请求封装var host = "";/*** methods请求方式，* URL：接口* Data：参数，json类型* header:请求头*/function request(url, method, data) {wx.showLoading({title: "加载中...",});return new Promise((resolve, reject) => {wx.request({url: host + url,method: method,data: data,header: {"content-type": "application/json",},success(res) {wx.hideLoading();resolve(res);},fail(error) {wx.hideLoading();reject(error);},complete() {wx.hideLoading();},});});
}export function get(url, data) {return request(url, "GET", data);
}export function post(url, data) {return request(url, "POST", data);
}

//组件调用index.js
import { post } from "../../utils/request";Page({data: {radio: "1",},async tipHandleClick() {const data = await post("/store/list", {});console.log(data);},
});

• uni-app小程序开发步骤

1、HbuliderX编辑器新建项目
2、下载微信开发者工具
3、HbuliderX编辑器设置中————小程序运行配置（微信开发者工具路径）示例：E:/微信web开发者工具
4、申请微信公众平台账号，个人申请订阅号（每个邮箱只能申请一次），在开发中（开发设置）中获取AppID(小程序ID)
5、打开微信开发者工具（设置——通用设置——安全）打开服务端口