微信小程序开发入门教程（二）---分析官方云开发例子中的一些功能

接上一篇文章：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。

……

微信小程序开发入门教程（二）---分析官方云开发例子中的一些功能

猜你喜欢