微信小程序開發入門教程（二）---分析官方雲開發例子中的一些功能

接上一篇文章：https://www.cnblogs.com/pu369/p/11326538.html

1、官方雲開發的例子中，點擊獲取 openid，對應代碼在E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml中的

  <!-- 用戶 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
    ></button>
    <view>
      <button class="userinfo-nickname" bindtap="onGetOpenid">點擊獲取 openid</button>
    </view>
  </view>

分析一下：

1.1<!-- 用戶 openid -->表示代碼注釋
1.2<view class="userinfo"> view相當於html頁的div , urerinfo這個class的定義位於E:\wxDEV\helloyun\miniprogram\pages\index\index.wxss中(CSS3,flex布局)
第一個button元素中，open-type="getUserInfo"和bindgetuserinfo="onGetUserInfo"，其中open-type表示微信開放能力，bindgetuserinfo表示具體的能力，即：
用戶點擊該按鈕時，會返回獲取到的用戶信息，回調的detail數據與wx.getUserInfo返回的一致。參考官方說明：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
onGetUserInfo的定義在E:\wxDEV\helloyun\miniprogram\pages\index\index.js中,如下：

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

上面代碼中，將參數e對象的成員變量賦給本頁面的data變量（在E:\wxDEV\helloyun\miniprogram\pages\index\index.js中定義），然后在對應的index.wxml中用類似於{{avatarUrl}}進行輸出。參數e的數據結構參見：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html

1.3第二個button元素：<button class="userinfo-nickname" bindtap="onGetOpenid">點擊獲取 openid</button>

bindtap綁定的onGetOpenid定義在對應的index.js中

  onGetOpenid: function() {
    // 調用雲函數
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[雲函數] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

通過調用雲函數login(位於E:\wxDEV\helloyun\cloudfunctions\login），在雲函數中用getWXContext獲取了openid等，參考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/utils/getWXContext.html

2、繼續分析E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml，關於上傳圖片

  <!-- 上傳圖片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上傳圖片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>

其中，bindtap綁定的doUpload在對應的index.js中，主要是用 wx.chooseImage和 wx.cloud.uploadFile（詳細說明可從官方文檔搜索）：

// 上傳圖片
  doUpload: function () {
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上傳中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上傳圖片
        const cloudPath = 'goods/my-image' + Math.random() + filePath.match(/\.[^.]+?$/)[0] 
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上傳文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上傳文件] 失敗：', e)
            wx.showToast({
              icon: 'none',
              title: '上傳失敗',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

 3、繼續分析E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml，關於操作數據庫

  <!-- 操作數據庫 -->
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操作數據庫</text>
    </navigator>
  </view>

其中，用navigator的open-type="navigate"和url屬性，使頁面跳轉到E:\wxDEV\helloyun\miniprogram\pages\databaseGuide
看一下databaseGuide.js
第一行const app = getApp()與index.js中的一樣，用於獲取小程序全局唯一的 App 實例。(app.js中還有一個App函數，在其中可聲明全局變量globalData，注意區別）
之后用page函數，設置了頁面顯示所需的data對象，OnLoad函數（其中獲取了全局變量globalData對象），以及其它在對應的wxml文件中用bindtap綁定的函數（方法）

4、其他位於E:\wxDEV\helloyun\miniprogram\pages下的頁面類似，每個頁面由后綴為wxml,wxss,js,json的四個文件組成，對其中不明白的代碼，首先可以查官方手冊或百度搜索，不再分析。

5、最后，讓我們新建一個頁面吧。

在開發者工具中，在項目的mininprogram\pages目錄上，點新建目錄,輸入名稱myabout，在目錄myabout上點右鍵，輸入頁面名稱仍為myabout

參考上篇文章，在E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml代碼的最后面的</view>之前加上代碼，以指向myabout，如下：

    <!-- myabout -->
  <view class="uploader">
    <navigator url="../myabout/myabout" open-type="navigate" class="uploader-text">
      <text>myabout</text>
    </navigator>
  </view>

再修改一下myabout.wxml中 <text>標簽中的內容。測試一下，OK。

 

 

 

……