微信小程序速览

前提条件

  • 会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)

相关推荐
拼图20912 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
wocwin13 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2301_805962932 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 天前
微信小程序121~130
微信小程序·小程序
難釋懷2 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~2 天前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君012 天前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习