微信小程序开发知识整理

前言：用于自己记录整理一些前端开发微信小程序中常用的点。

1.使用node安装vant Weapp.

vant Weapp官网地址：vant Weapp

在终端中：npm i @vant/weapp -S --production
在微信开发者工具中，构建npm
在微信开发者工具中，点击详情-本地设置，勾选使用npm模版
文件夹中生成以下文件：
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。
引入组件：按官网建议，在每个页面的json中引入所需组件：

2.升级vant weapp。

开发中发现有些组件引入无效，发现是版本1.0以下，那么进行vant weapp的升级。步骤：先卸载再安装，安装完成后记得再构建一次npm。

npm uninstall vant；
npm i @vant/weapp -S --production；如果命令行删不了旧版本，那么粗暴一点的方法：

查看package.json，删除其中的其余版本，只留下需要的，然后使用npm install安装，再构建一下npm。

3.app.json；

按照官网建议使用：微信小程序-全局配置

4.点击带参数

在点击的节点上，使用data-xx来绑定需要的参数：如：在view这个节点绑定bindtap事件为toDetail，需要的参数id，使用data-id绑定：

<view bindtap="toDetail" data-id="{{111}}"><view>

在js中,toDetail接收参数event：

toDetail(e) {
  console.log(e);
  let id = e.currentTarget.dataset.id;
}

console.log(e)的截图：

4.页面跳转带参数(wx.navigateTo)：

小程序中页面栈最多十层。

传递字符串：参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 '/pages/index/index?value1=hello&value2=world' 传递页面：

toDetail(e) {
  var id = 111;
  var name = "张三"
  wx.navigateTo({
    url: '../productDetail/productDetail?id=' + id + "&name=" + name
  })
},

接收页面，在onLoad函数中接收:

onLoad: function (options) {
//所有options中出来的都是字符类型，如果传递的是布尔类型的，需要(options.isShow == 'true') ? true : false 来处理；
//如果传递的是整型，那么需要用parseInt(options.num)来处理；
  var params = {
    id: options.id, 
    name: options.name
  }
  this.setData({
    params: params
  })
}

传递对象或数组：需要通过JSON.stringify将对象转换为字符串传递，接收时需要通过JSON.parse将字符串转换为对象传递页面：

toDetail(e) {
  var item = {id: 111, name: "张三"}
  wx.navigateTo({
    url: '../productDetail/productDetail?item=' + JSON.stringify(item)
  })
},

接收页面：

onLoad: function (options) {
  var item = JSON.parse(options.item）
  this.setData({
    params: item
  })
}

对象或数组中包含地址时，如?,&等符号，对象/数组先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码，接收时，先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的对象/数组；传递页面：

toDetail(e) {
  var obj = {id: 111, name: "张三"};
  var item = JSON.stringify(obj);//先转为字符串
  wx.navigateTo({
    url: '../productDetail/productDetail?item=' + encodeURIComponent(item) //再编码
  })
},

接收页面：

onLoad: function(options) {
    var item =JSON.parse(decodeURIComponent(options.item))
    this.setData({
      params: obj
    })
  }

5.在js中引入Toast组件路径；

官网：import Toast from 'path/to/@vant/weapp/dist/toast/toast';

按照官网的引入报错，百度一番后这样引入：我的页面：import Toast from '@vant/weapp/toast/toast';

6.Dialog组件，点击确定后异步关闭，怎么关闭默认的按钮loading样式？

<van-dialog
use-slot
title="弹窗标题"
show="{{ show }}"
show-cancel-button
cancel-button-text="返回"
bind:cancel="goBack"
bind:confirm="confirm" 
confirm-button-color="#409EFF"
async-close="{{true}}" //打开异步关闭
>
  <view>自定义弹窗内容</view>
</van-dialog>

在确认的点击事件中，使用e.detail.dialog.stopLoading();

confirm(e) {
  e.detail.dialog.stopLoading()
}

7.修改data中对象的某一个值。

data: {
  form: {
    name: "",
    age: ""
  }
},
nameChange(){
  this.setData({
   'form.name': "张三" //
  })
}