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

前言

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

开始

• 小程序单位rpx

1、小程序中 不需要主动来引入样式文件
2、需要把页面中某些元素的单位 由px 改成 rpx
   2.1、设计稿 750px
        750px = 750rpx
        1px = 1rpx

   2.2、把屏幕宽度改成 375 rpx
        275px = 750rpx
        1px = 2rpx
        1rpx = 0.5px

3、存在一个设计稿 宽度414 或者 page
    3.1、设计稿page 存在一个元素 宽度100px
    3.2、拿以上的需求去实现 不同宽度的页面适配
        page px = 750rpx
        1px = 750rpx / page
        100px = 750rpx * 100 / page
4、利用一个属性 calc属性 css 和 wxss 都支持 一个属性
    4.1、750 和 rpx中间不要留空格
    4.2、运算符的两边也不要留空格


示例：

view {
    height：200rpx
    font-size:40rpx
    background-color:#f00
    width:calc(750rpx * 100 / 375)
}

• 样式引入@import

1、引入的代码是通过@import来引入
2、路径只能写相对路径

示例：
    @import "../../styles/common.wxss"

• 使用less

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

• 封装请求

// 新建request.js文件
// 请求封装

var host = "http://wxsi.jsxhfh.com/admin";

/**
 * 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、打开微信开发者工具（设置——通用设置——安全）打开服务端口