微信小程序开发实战

微信小程序开发工具

一、VSCODE编写微信小程序好用的插件

1、wechat-snippet
主要的功能是代码辅助，代码片段自动完成

2、wxml
用于将wxml代码进行高亮显示，并且提供代码格式化的功能

微信小程序 .wxml

一、微信小程序跳转方式

1、wx.navigateTo({})

跳转到指定的url页面，不能跳转到tabBar页面，使用wx.navigateBack() 返回

2、wx.navigateBack({})

关闭当前页面，返回上一页或多级页面

3、wx.redirectTo({})

关闭当前页面，跳转到不带有tabBar的页面

4、wx.reLaunch({})

关闭所有页面，跳转到指定页面

5、wx.switchTab({})

跳转到指定的tabBar页面

二、微信小程序UI组件库

推荐使用vant weapp 轻便好上手

官网地址: https://vant-contrib.gitee.io/vant-weapp/#/home

引用组件
1、单独在某个页面的json文件中引用
或者全局配置，这样每个页面都能使用到该组件

3、在页面js文件中引用

import Toast from '@vant/weapp/toast/toast';
....
Toast('请选择日期');

1
2
3
4

4、在页面wxml中绑定标签

<van-toast id="van-toast" />
1

三、微信小程序自定义tabbar

项目需求：根据不同角色权限切换不同tabbar

实现方式
1、项目根目录下创建 custom-tab-bar

问题：自定义tabbar动态更新数据不起效
由于在自定义tabbar挂载之前，无法判断用户的角色权限，后面更新数据时tabbar不发生变化

尝试了各种方法，数据一直不会更新
最终的解决方案：在每个带有tabbar的页面根据角色控制list

onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      const userInfo = local.getSync('userInfo')
      if (userInfo.type == 2) {
        this.getTabBar().setData({
          list: this.data.list1,
          selected: 0
        })
      } else {
        this.getTabBar().setData({
          list: this.data.list2,
          selected: 0
        })
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、详细代码

由于全局文件App.json 配置tabbar 最少2个 最多5个，所以【我的】页面共用一个

// custom-tab-bar/custom-tab-bar.js
import local from '../utils/local'
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#333333",
    roleId: '',
    selectedColor: "#1989fa",
    allList: [{
      list1: [
        {
          "pagePath": "/pages/index/index",
          "text": "考试",
          "iconPath": "/assets/images/tab/do_nor.png",
          "selectedIconPath": "/assets/images/tab/do_sel.png"
        }, {
          "pagePath": "/pages/brushList/brushList",
          "text": "刷题",
          "iconPath": "/assets/images/tab/brush_nor.png",
          "selectedIconPath": "/assets/images/tab/brush_sel.png"
        },
        {
          "pagePath": "/pages/my/my",
          "text": "我的",
          "iconPath": "/assets/images/tab/my_nor.png",
          "selectedIconPath": "/assets/images/tab/my_sel.png"
        }
      ],
      list2: [
        {
          "pagePath": "/pages/mIndex/mIndex",
          "text": "首页",
          "iconPath": "/assets/images/tab/home_nor.png",
          "selectedIconPath": "/assets/images/tab/home_sel.png"
        },
        {
          "pagePath": "/pages/mStudent/mStudent",
          "text": "学员管理",
          "iconPath": "/assets/images/tab/student_nor.png",
          "selectedIconPath": "/assets/images/tab/student_sel.png"
        },
        {
          "pagePath": "/pages/my/my",
          "text": "我的",
          "iconPath": "/assets/images/tab/my_nor.png",
          "selectedIconPath": "/assets/images/tab/my_sel.png"
        }
      ]
    }],
    list: []

  },
  // 在组件实例进入页面节点树时执行
  attached() {
    // 获取用户的类型，进行判断tabBar的List
    const userInfo = local.getSync('userInfo')
    if (userInfo.type == 2) {
      this.setData({
        list: this.data.allList[0].list1
      })
    } else {
      this.setData({
        list: this.data.allList[0].list2
      })
    }

  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {  //switchTab的作用根据不同的路径切换tabbar下标
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  }


})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

app.json 中tabBar必须要写，兼容低版本

在带有tabbar页面中写入下面代码

// js 中
...
  onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  //对应的下标
      })
    }
  },
1
2
3
4
5
6
7
8
9
10

四、如何在wxml文件中写方法

1、新建一个.wxs文件

2、封装方法

// 注意事项：
// 1. wxs不支持es6等写法，如：let、解构、箭头函数等
// 2. 只能使用 var， function 基本写法（es5）
// 全局 wxs 方法
function formateDate(val) {
  return val && val.substring(0, 10)
}
// 用 module.exports 导出
module.exports = {
   formateDate: formateDate,// 不支持简写
}
1
2
3
4
5
6
7
8
9
10
11

3、页面中使用

// .wxml中
<wxs src='/utils/wxs_gloable.wxs' module="m1" />
<view>有效期至：{{item.endTime?m1.formateDate(item.endTime):'永久有效'}}</vie
1
2
3

微信小程序 .js

一、微信小程序登录

二、构建npm包常见问题

解决办法：在项目根目录，与project.config.json 同级，新建miniprogram文件夹，让再将生成的
miniprogram_npm提出来放到更目录，再删除miniprogram文件夹

三、全局状态管理库（wxMiniStore）

1、安装与构建

npm install wxministore -S
1

然后在微信开发者工具上，工具-构建npm

2、在项目中引用

• 在项目根目录下创建store文件夹
• 文件夹下可以创建多个js文件，可用来区别储存的是哪类数据

store.js
userInfo.js

import Store from "wxministore";

export default new Store({
    //全局状态初始值
    state: {
        // ...require('./userInfo.js')
        userInfo: {
            name: 111
        }
    },
    //全局方法
    methods: {

    },
    //页面监听
    pageLisener: {
        onLoad() { },
        onShow() { }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3、全局注入

// app.js
import store from './store/store'
App({
  store,
  onLaunch() {
	...
  }
    
})
1
2
3
4
5
6
7
8
9

4、页面中使用

// wxml中
<view>{{$state.userInfo.name}}</view>

//js中
//更新数据
const app = getApp()
app.store.setState({
 userInfo
})
//获取数据
let { userInfo } = app.store.getState();

1
2
3
4
5
6
7
8
9
10
11
12

参考文档: https://blog.csdn.net/qq_35173602/article/details/82349742

四、微信小程序自定义组件

自定义树组件

1、定义组件

// deptTree.wxml
<!-- 多级树 -->
<view class="tree_container">
    <!-- 一级菜单 -->
    <view>
        <view style="padding-left: {{treeListIndex*8}}px" class="tree-item">
            <view class="item-block" bindtap='tapTreeTitle' data-item="{{treeList}}">
                <van-checkbox wx:if="{{checkbox}}" icon-size="16px" value="{{ treeList.isSel }}"></van-checkbox>
                <view class="tree_text" data-item="{{treeList}}">{{treeList.title}}</view>
                <view data-item="{{treeList}}" wx:if="{{treeList.children}}" style="padding-left:50rpx" catchtap='tapTreeItem'>
                    <van-icon name="{{!collapse ? 'arrow-up':'arrow-down'}}" color="#666" />
                </view>
            </view>
        </view>
        <!-- 递归菜单 -->
        <block wx:if="{{treeList.children && !collapse}}">
            <block wx:for="{{treeList.children}}" wx:key="index" wx:for-item="item">
                <deptTree data-index='{{index}}' treeList="{{item}}" data-item="{{item}}" checkbox='{{checkbox}}' treeListIndex='{{treeListIndex+1}}' catchtap='treenodetap'></deptTree>
            </block>
        </block>
    </view>
</view>


// deptTree.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    treeListIndex: {// 默认为0，当前循环的第几层，用于tree样式展示
      type: Number,
      value: 1
    },
    treeList: Object,
    checkbox: {
      type: Boolean,
      value: false
    }
  },

  //监听
  // observers: {
  //   'treeList'(data) {
  //     this.setData({
  //       treeList: data
  //     })
  //   }
  // },

  /**
   * 组件的初始数据
   */
  data: {
    collapse: true // 每个tree组件对应自己的collapse属性；（true:折叠/false:展开;）
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tapTreeTitle(e) {
      let item = e.currentTarget.dataset.item;
      this.triggerEvent('treeTap', item);
    },
    tapTreeItem: function (e) { // 点击项
      let item = e.currentTarget.dataset.item;
      if (item.children !== undefined) { // 其下有子节点，可折叠展开操作
        this.setData({ // 折叠展开操作
          collapse: !this.data.collapse,
        })
      }
    },

    treenodetap: function (e) { // 递归的最终子节点
      let item = e.currentTarget.dataset.item;
      this.triggerEvent('treeTap', item); // 将当前的点击项的数据传递给父页面
    }

  }

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

2、页面中引用

 // xx.json
   "usingComponents": {
    "deptTree": "/components/deptTree/deptTree"
  }

//xx.wxml
  <block wx:for="{{bList}}" wx:key="index" wx:for-item="item">
      <deptTree data-obj='{{item}}' data-index='{{index}}' treeList="{{item}}"></deptTree>
  </block>
1
2
3
4
5
6
7
8
9

五、this.setData如何修改对象中某个属性的值

直接写 xx.xx 会报错
1、使用['对象.属性']：值 方式，其中'对象.属性'可以是变量
2、也可以使用 对象: {属性: '值'} 方式

微信小程序生命周期

一、页面生命周期函数

1、应用的生命周期函数

启动-》运行-》销毁

2、页面的生命周期函数

加载-》渲染-》销毁

二、组件生命周期函数