微信小程序速览

前提条件

会scss
明白vw,vh的意思
会vue
会es6语法, 会ts

个人认为的最佳开发方式

vscode安装微信小程序相关插件，作为主力编辑器
微信开发者工具当浏览器使用

小程序代码文件构成

ts文件: 实现主要代码逻辑
wxml文件: 实现页面/组件视图
scss文件: 实现页面/组件引入
json文件: 实现组件引入

特殊的文件

app.ts: 微信小程序入口文件
app.scss: 全局样式文件
app.json: 微信小程序配置文件(所有看到的界面都要在该文件进行配置)

wxml中将变量设置到某个组件属性上

xml 复制代码

<van-field value="{{ formData.inputValue2 }}" border="{{ false }}" />

{{ }} 中仅能支持最最最最最简单的表达式，不支持复杂表达式

wxml中的逻辑控制语句

分支语句

xml 复制代码

<block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
</block>
<block wx:elif="{{!hasUserInfo}}">
</block>
<block wx:else>
</block>

循环语句

每一项默认为item

xml 复制代码

<van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image slot="icon" mode="aspectFit" class="img-item" src="{{item.iconPath}}"></image>
</van-tabbar-item>

事件

xml 复制代码

<van-tabbar bind:change="switchTab">
</van-tabbar>

ts 复制代码

Component({
    data:{
        selected: 0,
        list: [
            {
                pagePath: "/pages/base/index/index",
                iconPath: "/assets/image/icon_component.png",
                selectedIconPath: "/assets/image/icon_component_HL.png",
                text: "基础",
              }
        ]
    },
    methods:{
        switchTab(e: WechatMiniprogram.CustomEvent) {
            const selectedIndex = e.detail as unknown as number;
            const tabInfo = this.data.list[selectedIndex];
            this.setData({ selected: selectedIndex });
        }
    }
})

事件参数不能直接通过事件函数传递，只能通过自定义data-xxx属性传递，然后通过e.currentTarget.dataset.xxx获取

生命周期函数

微信小程序分为应用生命周期函数，页面生命周期函数，组件生命周期函数。这些生命周期函数不是统一的，使用时请注意应该采用哪种生命周期

小程序的页面生命周期函数，没有类似vue的updated周期函数

解决办法是：微信小程序: setData详解 - 掘金 (juejin.cn)

将updated周期函数中的逻辑移到，setData的回调函数中，该回调函数会在setData触发页面更新完毕之后，再被调用

别名使用

js/ts中支持使用别名，但scss中不支持使用别名

自定义组件

需要在对应的xx.json中设置"component": true 如下例子

json 复制代码

{
  "component": true,
  "usingComponents": {}
}

demo

free pan/wechat_miniapp_example (gitee.com)