微信小程序开发语法,微信小程序开发技术基础

1.开发环境

• 微信公众平台-微信小程序开发

1.注册开发者账号 ***/wxopen/waregister?action=step1 2.完成账号实名认证 3.前往小程序开发后台 获取 小程序的APPID ***/wxamp/home/guide?lang=zh_CN&token=303858676 4.首页--填写小程序基本信息--填写小程序类目 5.获取个人开发微信小程序的 APPID【设置---账号信息--APPID】

• 安装微信开发者工具

下载并安装最新稳定版 微信小程序开发者工具 ***/miniprogram/dev/devtools/download.html

2.页面组件 js 生命周期

// pages/order/order.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { }})

3.数据定义 data

• 定义数据

Page{ data:{ content:"黄四郎" }}

• 页面直接取值 没有双向绑定

输入input 的数据 文本内容不发生改变

<input type="text" class="inp" value="{{content}}" /><text> {{content}} </text>

• 双向绑定的实现 setData 修改数据【js中修改值】

<input type="text" class="inp" value="{{content}}" bindInput="changeContent" /> #绑定输入事件changeContent(event){ //事件执行函数 //更新data 中的数据--达到类似的双向绑定效果 this.setData({ content:event.detail.value }) }

• 在js中获取data 的数据

this.data.content

4.方法定义

微信小程序的方法直接写入到Page{}对象中即可。

Page{ data{}, 方法名(){}， 方法名1(){ //调用其他方法 this.方法名() }}

5.事件定义

微信中绑定事件的代码相比vue 发生了比较大的变化

事件类型：

事件绑定语句：

<组件 bind事件类型="事件执行函数"><组件>//方法中获取组件的数据事件执行函数(event){ //event.detail.value 获取value值 //event.detail.dataset.自定义属性名 #获取自定义属性值}

6.模块化语法 commonJS 规范

//暴露导出moudle.exports = { xxx}//导入const aaa = require('相对路径')//使用aaa.xxx

7.自定义组件

在项目根目录创建组件文件夹： components/toast 右键创建组件 toast

//toast.js // components/toast/toast.jsComponent({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { }})//toast.wxml<text> 你好呀 我是子组件 toast</text>

父组件页面中使用该组件

//index.json { "usingComponents": { "toast":"/components/toast/toast" }}//index.wxml<toast></toast>

8.组件传值

8.1 父传子

• 父组件-页面级组件传值

<toast title="我是页面传递的标题" cOntent="{{content}}"></toast>

• 子组件获取使用参数

properties: { title:{ type:String, value:'标题' }, content:{ type:{ type:String, value:"内容" } } },//页面中使用<text>{{title}}</text><text>{{content}}</text>//js中使用this.data.title

8.2 子传父 自定义事件

• 子组件定义 自定义事件带参数发送

//子组件 methods: { //子组件自己的事件 changeData(){ this.triggerEvent('sendData',{data:'我是子组件传递的数据',msg:"你好啊，我是儿子"}) } }

• 父组件 通过监听自定义事件 在执行函数中获取数据

<toast bindsendData="getData"></toast>getData(e){ console.log(e.detail.data); //我是子组件传递的数据 console.log(e.detail.msg); //你好啊，我是儿子 },

9.指令

微信小程序的指令 以 wx:* 语法格式使用

9.1 循环指令 wx:for

• 自带 item 和 index

如果有多个子节点的循环渲染失败，可以将顶级view 更换为无意义标签< block>

<view wx:for="{{userList}}" wx:key="index"> <view> {{item.name}} </view> <view> {{item.age}} </view></view>Page({ data: { userList:[{name:'张麻子',age:40},{name:"黄四郎",age:33}] }})

• 自定义item 和index

<view wx:for="{{arr}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <view wx:for="{{item}}" wx:for-index="index1" wx:for-item="item1" wx:key="index1"> {{item1}} </view> </view>Page({ data: { arr:[[1,2,3],[4,5,6]] }})

9.2 判断指令 wx:if

<view wx:if="{{condition}}"> True </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

9.3 显隐属性 hidden

hidden 是否隐藏该dom 值为true 隐藏

<view wx:if="{{show}}"> //show 为true新增dom false:移除dom 我是显隐内容</view><view hidden="{{show}}"> //show 为true 隐藏dom false:移除dom 我是显隐内容</view>

10.底部导航 tabBar 全局配置

可以理解为 vue 中的 一级路由 文档链接 ：***/miniprogram/dev/reference/configuration/app.html

app.json 中添加 tabBar 配置

前提条件 1.在项目根目录下 创建 images文件夹 存储所有用到的图片 2.三个页面已经创建 且在app.json pages属性中声明

"tabBar": { "color":"#666", "selectedColor":"#00ff00", "borderStyle":"white", "list": [ { "pagePath":"pages/home/home", "text":"首页", "iconPath":"images/home.png", "selectedIconPath": "images/home-active.png" }, { "pagePath":"pages/shop/shop", "text":"商城", "iconPath":"images/shop.png", "selectedIconPath": "images/shop-active.png" }, { "pagePath":"pages/user/user", "text":"个人中心", "iconPath":"images/user.png", "selectedIconPath": "images/user-active.png" } ] },

11.页面跳转

11.1 wx.switchTab()

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({ url: '/home'})

11.2 wx.reLaunch()

关闭所有页面，打开到应用内的某个页面

wx.reLaunch({ url: 'test?id=1' #携带参数跳转})Page({ onLoad (option) { console.log(option.query) #接收传递过来的参数 }})

11.3 wx.redirectTo()

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.redirectTo({ url: 'test?id=1'})

11.4 wx.navigateTo()

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({ url: 'test?id=1'})

11.5 wx.navigateBack()

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

wx.navigateBack({ delta: 2 #返回的层数})

12 微信小程序 API

微信小程序api 针对很多微信中的扩能的调用，比如获取用户信息，获取用户手机号，转发，分享功能，支付，定位功能等等。

文档地址：***/miniprogram/dev/api/