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

……

微信小程序开发入门教程(二)---分析官方云开发例子中的一些功能的更多相关文章

  1. 微信小程序(七)-项目实例(原生框架 MINA转云开发)==02-云开发-配置

    云开发:1.就是用云函数的型式来使用云存储和云数据库完成各种操作!     2.只关注调什么函数,完成什么功能即可,无需关心HTTP请求哪一套!     3.此模式不代表没有服务器,只是部署在云环境中 ...

  2. 微信小程序 新手入门教程

    因为工作需要,最近学习了一下微信小程序,在此分享一下大概的流程. 强烈建议大家先去看微信小程序简易教程:点我进入 起步: 安装微信web开发软件者工具,需要破解的同学可以网上找破解教程,很简单的,这里 ...

  3. 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库

    云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...

  4. 原创:从零开始,微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...

  5. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

  6. 从零开始:微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 一:微信小程序的特点 张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使 ...

  7. 微信小程序《沈航二手书》

    微信小程序<沈航二手书> 0x01. 利益相关者  利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...

  8. 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的

    解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...

  9. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  10. 微信小程序把玩(十二)text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

随机推荐

  1. Java静态代理与动态代理实现

    一.什么是代理 代理是一种设计模式,它提供了一种通过代理访问目标对象的方式.在应用代理之前,我们调用对象的过程如下: 客户端直接调用对象并获取返回值.而应用了代理之后,我们调用对象的过程变成如下: 客 ...

  2. 关于centOS安装配置xampp那点事

    1.到官网下载centOS对应版本的xampp,应该是以tar.gz为后缀的 2.tar -zxf 下载的包 3.mv lampp /opt 4.service mysqld stop因xampp里自 ...

  3. Pygame小游戏练习三

    @Python编程从入门到实践 Python项目练习 七.创建Passenger类 创建passenger.py文件,创建Passenger类,控制乘客属性和行为 # passenger.py imp ...

  4. Django-djangorestframework-异常模块-源码及自定义异常

    目录 异常模块 为什么要自定义异常模块 常见的几种异常情况 异常模块源码分析 自定义 drf 异常处理 异常模块 为什么要自定义异常模块 所有经过 drf APIView 视图类产生的异常,都可以提供 ...

  5. linux 安装telnet

    一.CentOS下查看系统是否已安装telnet rpm -qa | grep telnet telnet 是挂在 xinetd 底下的,所以同时查看是否安装了xinetd服务 rpm -qa | g ...

  6. IntelliJ IDEA 搭建 Go 开发环境

    本文介绍 Windows7 x64 基于 IntelliJ IDEA 搭建 Go 语言开发环境.主要是一些操作过程截图以及简单文字描述,如有不清楚的地方​,欢迎指正.所有软件使用当前(2016.12. ...

  7. Zircon

    Zircon 来源 https://github.com/zhangpf/fuchsia-docs-zh-CN/tree/master/docs/the-book 国内镜像源 https://hexa ...

  8. kubernetes 集群内部访问外部的数据库endpoint

    k8s访问集群外独立的服务最好的方式是采用Endpoint方式,以mysql服务为例: 创建mysql-service.yaml apiVersion: v1 kind: Service metada ...

  9. git 分布式版本控制

    一.git版本控制 管理文件夹 安装省略 1. 进入要管理的文件夹 2. 初始化 (提名) 3. 管理 4. 生成版本 对应的命令: # 进入文件夹以后 右击选git bash here #初始化 g ...

  10. 8.JSP与JavaBean

    1.<jsp:useBean> <html> <head> <title>jsp:useBean 标签的使用</title> </he ...