微信小程序速览

前提条件

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

相关推荐
毛毛三由2 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
三翼鸟数字化技术团队3 小时前
本地开发环境获取远程App端环境-研发提效小技巧
websocket·微信小程序
知识分享小能手6 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
從南走到北11 小时前
智尚房产中介小程序
微信小程序·小程序
LawsonJin13 小时前
springboot实现微信小程序支付(服务商和普通商户模式)
spring boot·后端·微信小程序
從南走到北15 小时前
房屋出租出售预约系统
微信小程序·小程序
前端开发呀1 天前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
尘似鹤1 天前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
源码_V_saaskw1 天前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
源码哥_博纳软云1 天前
JAVA同城预约服务家政服务美容美发洗车保洁搬家维修家装系统源码小程序+公众号+h5
java·开发语言·微信小程序·小程序