本文发表于 188 天前，其中的信息可能已经事过境迁
数据的创建与修改
使用 wx.setData() 方法修改数据，使用 this.data 方法获取数据。
js
page({
data: {
value: 1,
obj: {
a: 1,
},
},
onLoad() {
// 修改数据
wx.setData({
value: 2,
"obj.a": 2,
});
},
onReady() {
console.log(this.data.value);
},
});点击事件
触发方式
微信小程序中的点击事件为 bindtap
传递参数
微信小程序传递方法如下
index.wxml
html
<button class="right-btn" bindtap="open" data-id="{{info.id}}">查看详情</button>index.js
js
open(e){
console.log(e.currentTarget.dataset.id) // 获取到传递的参数
}阻止事件冒泡
使用 catchtap 阻止事件冒泡。
html
<view bindtap="open">
<button class="right-btn" catchtap="open" bindtap="show">查看详情</button>
</view>单向绑定
html
<div class="{{1}}"></div>双向绑定
需要注意的是仅支持基本类型，类似于 data.value 是非法的。
html
<input model:value="{{value}}" />子组件获取参数
子组件通过 properties 获取参数。
父组件传参
index.wxml
html
<component value="1"></component>子组件接收
component.js
js
Component({
properties: {
value: {
type: Number,
value: 0,
},
},
});父组件调用子组件方法
使用 selectComponent 获取子组件实例，调用子组件方法。
component.js
js
Component({
methods: {
open() {
console.log("子组件方法被调用了");
},
},
});index.wxml
html
<button bindtap="open">调用子组件方法</button> <component id="child"></component>index.js
js
page({
open() {
const child = this.selectComponent("#child");
child.open();
},
});子组件调用父组件方法
子组件通过 this.triggerEvent 触发事件，父组件通过 bind 绑定事件。
component.js
js
Component({
methods: {
open() {
this.triggerEvent("open", { a: "参数" });
},
},
});index.wxml
html
<component bind:open="open"></component>index.js
js
page({
open(data) {
console.log("父组件方法被调用了");
console.log(data);
},
});路由跳转方法
wx.navigateTo()保留当前页，跳转到应用内部某个页面。小程序中页面栈最多十层。wx.redirectTo()关闭当前页面，跳转到应用内部某个页面。wx.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。wx.reLaunch()关闭所有页面，打开到应用内的某个页面。wx.navigateBack()关闭当前页面，返回上一页面或多级页面。
详情请查看 微信官方文档
页面下拉刷新
在需要开启的页面 json 文件中添加 enablePullDownRefresh 属性，值为 true ，即可开启下拉刷新功能。
使用 wx.stopPullDownRefresh() 停止下拉刷新。
js
page({
// 下拉刷新
onPullDownRefresh() {
console.log("下拉刷新");
setTimeout(() => {
// 停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
});本地存储
wx.setStorageSync()设置本地存储wx.getStorageSync()获取本地存储
wx:for
循环渲染列表，使用 wx:for 属性，值为 Array 。
html
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
<view>{{item}}</view>
<view>{{index}}</view>
</view>wx:if
条件渲染，使用 wx:if 属性，值为 Boolean 。
html
<view wx:if="{{true}}">
<view>条件渲染</view>
</view>
<view wx:else>
<view>条件渲染</view>
</view>数据监听器
监听器使用 observers 属性 。
js
page({
observers: {
"numberA, numberB": function (numberA, numberB) {
// 在 numberA 或者 numberB 被设置时，执行这个函数
this.setData({
sum: numberA + numberB,
});
},
},
});详情请查看 微信官方文档
页面通讯
在打开新页面时，可使用 events 实现页面之间的通讯。
js
// index.js
page({
open() {
wx.navigateTo({
url: "/pages/detail/detail",
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (data) {
console.log(data);
},
someEvent: function (data) {
console.log(data);
},
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit("acceptDataFromOpenerPage", { data: "test" });
},
});
},
});js
// detail.js
page({
onLoad: function (option) {
const eventChannel = this.getOpenerEventChannel();
// 调用 index.js 中的 acceptDataFromOpenedPage 方法
eventChannel.emit("acceptDataFromOpenedPage", { data: "test" });
// 调用 index.js 中的 someEvent 方法
eventChannel.emit("someEvent", { data: "test" });
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on("acceptDataFromOpenerPage", function (data) {
console.log(data);
});
},
});手机上预览效果非常卡
有时候会碰到，模拟器上很流畅，但是在移动端预览时，页面异常卡顿，以下是一些解决方法
- 尝试将真机调试更改为局域网模式
- 使用真机预览功能，而非真机调试
- 发布体验版再次查看是否卡顿
需要在体验版访问http域名？
上传至体验版后打开小程序调试模式即可不受域名限制
评论 隐私政策