接上一篇文章：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.htmlonGetUserInfo的定义在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: ,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) { wx.showLoading({
title: '上传中',
}) const filePath = res.tempFilePaths[] // 上传图片
const cloudPath = 'goods/my-image' + Math.random() + filePath.match(/\.[^.]+?$/)[]
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。
……