微信小程序开发

 1 //index.js
 2 //获取应用实例
 3 const app = getApp()
 4 
 5 Page({
 6   data: {
 7     motto: ‘Hello World‘,
 8     userInfo: {},
 9     hasUserInfo: false,
10     canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)
11   },
12   //事件处理函数
13   bindViewTap: function() {
14     wx.navigateTo({
15       url: ‘../logs/logs‘
16     })
17   },
18   onLoad: function () {
19     if (app.globalData.userInfo) {
20       this.setData({
21         userInfo: app.globalData.userInfo,
22         hasUserInfo: true
23       })
24     } else if (this.data.canIUse){
25       // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
26       // 所以此处加入 callback 以防止这种情况
27       app.userInfoReadyCallback = res => {
28         this.setData({
29           userInfo: res.userInfo,
30           hasUserInfo: true
31         })
32       }
33     } else {
34       // 在没有 open-type=getUserInfo 版本的兼容处理
35       wx.getUserInfo({
36         success: res => {
37           app.globalData.userInfo = res.userInfo
38           this.setData({
39             userInfo: res.userInfo,
40             hasUserInfo: true
41           })
42         }
43       })
44     }
45   },
46   getUserInfo: function(e) {
47     console.log(e)
48     app.globalData.userInfo = e.detail.userInfo
49     this.setData({
50       userInfo: e.detail.userInfo,
51       hasUserInfo: true
52     })
53   }
54 })

 1 <!--index.wxml-->
 2 <view class="container">
 3   <view class="userinfo">
 4     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo=" getUserInfo"> 获取头像昵称 </button>
 5     <block wx:else>
 6       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 7       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 8     </block>
 9   </view>
10   <view class="usermotto">
11     <text class="user-motto">{{motto}}</text>
12   </view>
13 
14   <view>
15     <navigator url="/pages/form/form" open-type="navigate">跳转到form页面</navigator>
16   </view>
17 
18 </view>

 1 // pages/list/list.js
 2 Page({
 3 
 4   /**
 5    * 页面的初始数据
 6    */
 7   data: {
 8     list: []
 9   },
10 
11   loadList: function(e) {
12     var list;
13     wx.request({
14       url: "https://www.xxx.com/getList.json",
15       success: function (res) {
16         list = res.data.list
17         console.log(list);
18         var currentPage = getCurrentPages()[getCurrentPages().length-1];
19        // 设置页面数据
20         currentPage.setData({
21           list: list
22         });
23       }
24     });
25   }
26 })

1 <button bindtap="loadList">加载数据列表</button>
2 <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item">
3 {{item.title}}
4 </view>

1 <!--pages/phoneNum/phoneNum.wxml-->
2 <text>phoneNum</text>
3 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
4 <button bindtap=‘getMobile‘>获取手机号</button>
5 
6 <!--客服会话组件，二选一-->
7 <button open-type=‘contact‘ bindcontact=‘‘ session-from=‘xxx‘>进入客服会话</button>
8 <contact-button session-from=‘xxx‘>客服</contact-button>