2 WeChat Mini Program
If you want information related to the blog, follow the public account: chuanyeTry to get the relevant information!
2 WeChat Mini Program
Previous links: 1 WeChat applet
1. Jump
1.1 Bind click events to labels
<view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>
Page({
...
/**
* 点击绑定的事件
*/
clickMe:function(e){
var nid = e.currentTarget.dataset.nid;
console.log(nid);
}
})
1.2 Page jump
wx.navigateTo({
url: '/pages/redirect/redirect?id='+nid
})
If the page you jump to wants to accept parameters, you can accept them in the onLoad method.
redirect.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
}
})
1.3 Jump through tags
<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>
2. Data binding
<html>
...
<div id="content"></div>
<script>
var name = "李业迟到";
$('#content').val(name);
</script>
</html>
-
vue.js
<html> <div id="app"> <div>{ {message}}</div> </div> <script> new Vue({ el: '#app', data: { message: '老男孩教育Python' } }) </script> </html>
2.1 Basic display
-
wxml
<view>数据1：{ {message}}</view> -
display data
// pages/bind/bind.js Page({ /** * 页面的初始数据 */ data: { message:"沙雕李业", } )}
2.2 Data update
-
wxml
<view>数据2：{ {message}}</view> <button bindtap="changeData">点击修改数据</button> -
change the data
Page({ data: { message:"沙雕李业", }, changeData:function(){ // 修改数据 this.setData({ message: "大沙雕李业"}); } })
3. Obtain user information
method one
-
wxml
<view bindtap="getUserName">获取当前用户名</view> -
js
getUserName:function(){ // 调用微信提供的接口获取用户信息 wx.getUserInfo({ success: function (res) { // 调用成功后触发 console.log('success',res) }, fail:function(res){ // 调用失败后触发 console.log('fail', res) } }) },
Method 2
-
wxml
<button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button> -
js
xxxx:function(){ wx.getUserInfo({ success: function (res) { // 调用成功后触发 console.log('success', res) }, fail: function (res) { // 调用失败后触发 console.log('fail', res) } }) }
Example
-
wxml
<!--pages/login/login.wxml--> <view>当前用户名：{ {name}}</view> <view> 当前头像：<image src="{ {path}}" style="height:200rpx;width:200rpx;"></image> </view> <button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息button</button> -
js
// pages/login/login.js Page({ /** * 页面的初始数据 */ data: { name:"", path: "/static/default.png" }, fetchInfo:function(){ var that = this; wx.getUserInfo({ success:function(res){ console.log(res); that.setData({ name:res.userInfo.nickName, path:res.userInfo.avatarUrl }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })Precautions:
-
If you want to obtain user information, you must obtain user authorization (button).
-
Authorized
-
Without authorization, by calling wx.openSetting
// 打开配置，手动授权。 // wx.openSetting({})
-
4. Obtain user location information
-
wxml
<view bindtap="getLocalPath">{ {localPath}}</view> -
js
data: { localPath:"请选择位置", }, getLocalPath:function(){ var that = this; wx.chooseLocation({ success: function(res) { that.setData({localPath:res.address}); }, }) },
5. for command
-
wxml
<!--pages/goods/goods.wxml--> <text>商品列表</text> <view> <view wx:for="{ {dataList}}" >{ {index}} - { {item}}</view> <view wx:for="{ {dataList}}" wx:for-index="idx" wx:for-item="x">{ {idx}} - { {x}}</view> </view> <view> { {userInfo.name}} { {userInfo.age}} </view> <view> <view wx:for="{ {userInfo}}">{ {index}} - { {item}}</view> </view> -
js
data: { dataList:["白浩为","海狗","常鑫"], userInfo:{ name:"alex", age:18 } },
6. Get pictures
-
wxml
<!--pages/publish/publish.wxml--> <view bindtap="uploadImage">请上传图片</view> <view class="container"> <image wx:for="{ {imageList}}" src="{ {item}}"></image> </view> -
js
data: { imageList: ["/static/hg.jpg", "/static/hg.jpg"] }, uploadImage:function(){ var that = this; wx.chooseImage({ count:9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success:function(res){ // 设置imageList，页面上图片自动修改。 // that.setData({ // imageList: res.tempFilePaths // }); // 默认图片 + 选择的图片； that.setData({ imageList: that.data.imageList.concat(res.tempFilePaths) }); } }); },
Note: Images are currently only uploaded to memory.
Summarize
-
Label (component)
- text
- view
- image
- navigator, jump to other pages (default can only jump to non-tabbar pages)
- button, button (special: recommended when obtaining user information)
-
event
-
bindtap
<view bindtap="func"></view> <view bindtap="func" data-xx="123"></view>func:function(e){ e.currentTarget.dataset }
-
-
api
-
navigateTo: retain the current page and jump to a page within the application. But you cannot jump to the tabbar page. Use wx.navigateBack to return to the original page. The page stack in the mini program can have up to ten levels.
wx.navigateTo({ url: '/pages/redirect/redirect?id='+nid, }) -
openSetting: Call up the client applet setting interface and return the operation results set by the user.
wx.openSetting({}) -
getUserInfo: Get user information.
wx.getUserInfo({ success:function(res){ console.log(res); } }) 注意：结合button按钮实现 -
chooseLocation: Open the map and choose a location.
wx.chooseLocation({ success: function(res) { }, }) -
chooseImage: Select an image from the local album or take a photo using the camera.
wx.chooseImage({ count:9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success:function(res){ } });
-
-
data binding
-
for instruction
Note: setData + that