锐客网

  1. 首页 > 睿知 > it技术 > >

微信小程序|轻松入门微信小程序云开发（详细）

微信小程序小程序云开发


文章目录

    • 1、课程介绍
    • 2、小程序基础
      • 2-1、小程序注册
      • 2-2、小程序开发工具介绍
      • 2-3、创建小程序及代码结构介绍
      • 2-4、配置文件JSON
      • 2-5、页面结构WXML
      • 2-6、页面样式WXSS
      • 2-7、页面交互JS
    • 3、小程序云开发
      • 3-1、小程序云开发介绍
      • 3-2、云数据库
      • 3-3、云函数
      • 3-4、云存储（1）
      • 3-5、云存储（2）
    • 4、电影小程序案例
      • 4-1、功能介绍与环境搭建
      • 4-2、Vant组件库
      • 4-3、电影列表
      • 4-4、电影详情
      • 4-5、电影评价
      • 4-6、用户信息
      • 4-7、审核上线
    • 5、课程回顾

1、课程介绍 0基础入门微信小程序开发、理解微信小程序的开发流程、理解小程序云开发的使用、独立完成小程序全栈项目
【微信小程序|轻松入门微信小程序云开发（详细）】html、css、JavaScript
多敲代码、多看官方文档
基础内容 > 注册申请 > 开发工具
代码构成 > JSON > WXML > WXSS > JS
云开发 > 云数据库 > 云函数 > 云存储
电影案例 > 上线审核
电影小程序
用户登录 如何通过云函数获取openid
传统微信登录 VS 云开发微信登录
如何获取用户信息
电影列表 如何云函数调用第三方API
云函数调用API VS 小程序调用API
渲染列表
电影评价 云数据库插入数据
选择相册图片或拍照
云存储的图片上传
2、小程序基础 2-1、小程序注册
mp.weixin.qq.com
2-2、小程序开发工具介绍
developers.weixin.qq.com
2-3、创建小程序及代码结构介绍
.json：配置文件，以json格式存储一些配置
.wxml：模板文件，描述页面结构，相当于HTML
.wxss：样式文件，调整页面样式，相当于css
.js：脚本逻辑文件，页面和用户的交互逻辑
2-4、配置文件JSON
project.config.json：项目配置
app.json：全局配置
page.json：页面配置
2-5、页面结构WXML
WXML 全程是WeiXin MarkUp Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构，充当的就是类似HTML的角色。
数据从动态的服务端获取，渲染到页面
数据绑定使用 Mustache 语法（双大括号）将变量包起来
wx:for="{{list}}"
wx:if="{{isLogin}}"、很长时间不改变的场景
hidden="{{!isLogin}}"、频繁切换场景
base.wxml Hi {{msg}} {{index}} {{item}} {{item.name}} {{item.age}} Bob已登录 请登录

base.js Page({ data: { msg: 'Vue', arr:['a','b'], list:[ { name:'bob1', age:19 },{ name:'bob2', age:29 } ], isLogin:true } })

2-6、页面样式WXSS
WXSS （WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。
尺寸单位：rpx（responsive pixel）：可以根据屏幕宽度进行自适应，适配不同宽度的屏幕。
引入外部wxss：@import './test.wxss'
第三方样式库：WeUI、iView Weapp、Vant Weapp
2-7、页面交互JS
JS负责逻辑交互
计数器demo
this.setData({ count:this.data.count+1 })

事件是对用户的交互操作行为的相应
bind VS catch
事件对象
base.wxml {{count}}

base.js Page({ data: { count:0 }, handle:function(){ this.setData({ count:this.data.count+1 }) }, onbox:function(e){ console.log('onbox 父'); console.log(e); console.log(e.currentTarget.dataset.id); }, onchild:function(e){ console.log('onchild 儿'); console.log(e); }, })

3、小程序云开发 3-1、小程序云开发介绍
云函数 云数据库 云存储
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
3-2、云数据库
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片

数据库初始化
初始化 const db = wx.cloud.database()
切换环境 const testDB = wx.cloud.database({ env:'test' })
通过小程序控制，插入数据会默认插入openid、通过控制台插入不会默认插入openid
cloud.wxml

cloud.js // 初始化数据库 const db = wx.cloud.database(); Page({ data: {}, insert: function () {// 普通写法 /* db.collection('userss').add({ data: { name: 'bob', age: 20 }, success: res => { console.log(res); }, fail: err => { console.log(err); } }) */// Promise写法 db.collection('userss').add({ data: { name: 'bob', age: 20 } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); })}, update:function(){ db.collection('userss').doc('8937eaa96117afc104b0a4b6145d825c') .update({ data:{ age:210 } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, search:function(){ db.collection('userss').where({ name:'bob' }).get().then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, delete:function(){ db.collection('userss').doc('8937eaa96117b09304b0d7d23131e328') .remove().then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, })

3-3、云函数
求和函数 sum()
获取当前用户的openid
批量删除云数据库的数据
上传并部署：云端安装依赖（不上传node_modules）
云函数更新一次，就要右键上传并部署一次
cloud.wxml

cloud.js // 初始化数据库 const db = wx.cloud.database(); Page({ data: {}, sum: function () { wx.cloud.callFunction({ name: 'quickstartFunctions', config: { env: this.data.envId }, data: { type: 'sum', a:2, b:3 } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, getOpenId:function(){ wx.cloud.callFunction({ name: 'quickstartFunctions', config: { env: this.data.envId }, data: { type: 'getOpenId' } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, batchDelete:function(){ wx.cloud.callFunction({ name: 'quickstartFunctions', config: { env: this.data.envId }, data: { type: 'batchDelete' } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) },})

sum index.js const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })// 获取openId云函数入口函数 exports.main = async (event, context) => { return { sum: event.a + event.b } }

getOpenid index.js const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })// 获取openId云函数入口函数 exports.main = async (event, context) => { // 获取基础信息 const wxContext = cloud.getWXContext()return { openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }

batchDelete index.js const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })const db = cloud.database(); // 获取openId云函数入口函数 exports.main = async (event, context) => { try { return await db.collection('userss').where({ name: 'bob' }).remove(); } catch (e) { console.error(e); } }

3-4、云存储（1）
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
3-5、云存储（2）
cloud.wxml

cloud.js // 初始化数据库 const db = wx.cloud.database(); Page({ data: { imgs:[] }, upload: function () { // 选择图片 wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); // wx.cloud.uploadFile({ // 指定上传到的云路径 cloudPath: new Date().getTime()+'.png', // 指定要上传的文件的小程序临时文件路径 filePath: tempFilePaths[0], // 成功回调 success: res => { // console.log('上传成功', res) console.log('上传成功', res.fileID) // db.collection('demoImg').add({ data:{ fileID:res.fileID } }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) }, fail:console.error }) } })}, getFile:function(){ wx.cloud.callFunction({ name: 'quickstartFunctions', data: { type: 'getOpenId' } }).then(res => { console.log(res.result.openid); db.collection('demoImg').where({ _openid:res.result.openid }).get().then(res2=>{ console.log(res2.data); this.setData({ imgs:res2.data }) }) }).catch(err => { console.log(err); }) }, downloadFile:function(e){ console.log(e); wx.cloud.downloadFile({ fileID: e.target.dataset.fileid, // 文件 ID success: res => { // 返回临时文件路径 console.log(res.tempFilePath); // 保存图片到手机相册 wx.saveImageToPhotosAlbum({ filePath:res.tempFilePath, success(res) { wx.showToast({ title:'保存成功' }) } }) }, fail: console.error }) } })

4、电影小程序案例 4-1、功能介绍与环境搭建
developers.weixin.qq.com
mp.weixin.qq.com
iconfont.cn
4-2、Vant组件库
https://youzan.github.io/vant-weapp
1、在miniprogram目录下 npm init
2、通过 npm 安装 npm i @vant/weapp -S --production
3、工具 > 构建npm
4、详情 > 本地设置 > 使用npm模块
5、"usingComponents": { "van-button": "@vant/weapp/button" }
6、危险按钮
4-3、电影列表
微信小程序|轻松入门微信小程序云开发（详细）
文章图片
http://github.com
https://github.com/request/request-promise
在对应云函数文件夹里安装 npm install --save request
继续 npm install --save request-promise
package.json { "name": "quickstartFunctions", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "request": "^2.88.2", "request-promise": "^4.2.6", "wx-server-sdk": "~2.4.0" } }

movielist.js const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })// 电影列表 http://api/douban.com/v2/movie/in_theaters // 电影详情 http://api/douban.com/v2/movie/subject/id /* https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=10&page_start=10https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=10&page_start=10page_limit 是一次请求数 page_start 是从第几条开始重新请求start 是从第几条开始重新请求 count 是一次请求数http://api.douban.com/v2/movie/subject/${event.movieid}?apikey=0df993c66c0c636e29ecbb5344252a4a`http://api.douban.com/v2/movie/subject/${event.movieid}?apikey=0df993c66c0c636e29ecbb5344252a4a` */ var rp = require('request-promise'); exports.main = async (event, context) => {return rp(`https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=${event.count}&page_start=${event.start}`) .then(function (res) { console.log(res); return res }) .catch(function (err) { console.err(err); }); }

movie.wxml {{item.title}} 观众评分： {{item.rate}}分

movie.js Page({ data: { movieList: [] }, getMovieList:function() { wx.showLoading({ title: '加载中', }) wx.cloud.callFunction({ name: 'quickstartFunctions', data: { type: 'movielist', start: this.data.movieList.length, // 第一次0-9 第二次 10-19 开始的地方 page_start count: 10 // page_limit } }).then(res => { console.log(res); this.setData({ // this.data.movieList是数组，在原有数组拼接新的 movieList: this.data.movieList.concat(JSON.parse(res.result).subjects) }) wx.hideLoading(); }).catch(err => { console.err(err); wx.hideLoading(); }) }, gotoComment:function(e){ console.log(e.target.dataset.movieid); wx.navigateTo({ url: `../comment/comment?movieid=${e.target.dataset.movieid}`, }) }, onLoad: function (e) { this.getMovieList(); }, onReachBottom:function(){ this.getMovieList(); }})

4-4、电影详情
4-5、电影评价
4-6、用户信息
{{userInfo.nickName}}

.bg1 { border-bottom: 10rpx solid #ccc; } /**/ .userinfo { font-size: 14px; border-radius: 40%; }.userinfo-avatar { overflow: hidden; display: block; width: 100rpx; height: 100rpx; margin-top: 32rpx; border-radius: 50%; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); }.userinfo-NickName { margin: -50rpx 0rpx 0rpx 150rpx; color: #aaa; }/**/ .userinfo { position: relative; width: 750rpx; height: 320rpx; color: #fff; display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { overflow:hidden; display: block; width: 160rpx; height: 160rpx; margin: 20rpx; margin-top: 50rpx; border-radius: 50%; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } .userinfo text { color: #fff; font-size: 14px; background-color: #c0c0c0; border-radius:40%; }

const app = getApp(); const db = wx.cloud.database(); const _ = db.command; var that; wx.cloud.init()// 在页面中定义插屏广告对象 var interstitialAd = null; Page({ data: { hasRegistered: false, //true是update，false是add openid: '', userInfo: [], hasUserInfo: false, canIUseGetUserProfile: true, }, onLogin:function(){ // 开发者如需获取用户身份标识符只需要调用wx.login接口即可 wx.login({ timeout: 0, success:res=>{ console.log(res); } }) }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认 // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res); this.setData({ userInfo: res.userInfo, hasUserInfo: true }); // 判断,获取userInfo，存入storage，新增或者更新时使用 wx.setStorageSync('userInfo', res.userInfo); }, fail: function (res) { //用户点了“拒绝” wx.showModal({ title: '登陆后获取更多功能', content: "点击确定重新登陆", cancelText: "取消", confirmText: "确定", success: function (res) { if (res.cancel) { //点击取消,默认隐藏弹框 console.log("no"); } else { //点击确定 console.log("ok"); wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res); that.setData({ userInfo: res.userInfo, hasUserInfo: true }); // 判断,获取userInfo，存入storage，新增或者更新时使用 wx.setStorageSync('userInfo', res.userInfo); }, }) } } }) } }) // 已注册，更新用户信息；没注册，新增用户 let that = this if (that.data.hasRegistered) { // true是update，false是add // console.log("updateUser"); this.updateUser() } else { // true是update，false是add // console.log("addUser"); this.addUser() } // }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, onLoad: function () {if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } //Load过程中，判断用户是否已经注册 let that = this // 调用login云函数获取openid，存入storage wx.cloud.callFunction({ name: 'login', data: {}, success: res => { app.globalData.openid = res.result.openid; wx.setStorageSync('openid', res.result.openid); var openid = wx.getStorageSync('openid'); // console.log(openid); }, fail: err => { console.error('[云函数] [login] 调用失败', err); } }) //使用缓存中的openid判断是否已经注册过，返回值 > 0说明有已有数据，注册过，直接调用update方法 db.collection('user').where({ _openid: wx.getStorageSync('openid') }).get({ success(res) { // console.log(res.data); console.log(res.data.length); if (res.data.length > 0) { that.setData({ hasRegistered: true //将hasRegistered更新为true是update }) } } }) }, //新增用户，并将hasReigstered设置为true addUser() { var userInfo = { name: wx.getStorageSync('userInfo').nickName, avatarUrl: wx.getStorageSync('userInfo').avatarUrl, gender: wx.getStorageSync('userInfo').gender, punchsNumber: 0, shareNumber: 0, likesNumber: 0, start: new Date() } let that = this db.collection('user').add({ data: userInfo, success(res) { that.setData({ hasRegistered: true }) console.log("新增用户成功", res) } }) }, //更新用户数据 updateUser() { var userInfo = { name: wx.getStorageSync('userInfo').nickName, avatarUrl: wx.getStorageSync('userInfo').avatarUrl, gender: wx.getStorageSync('userInfo').gender } db.collection('user').where({ _openid: wx.getStorageSync('openid') }).update({ data: userInfo, success(res) { console.log("更新用户信息成功", res) } }) }, })

4-7、审核上线
版本号、项目备注、提交审核、确定上线
5、课程回顾 小程序基础知识 > 小程序云开发 > 电影小程序案例
关掉视频，独立完成案例
反复看小程序官方文档

    推荐阅读


    上一篇：微信小程序|微信小程序 云开发入门指南

    下一篇：微信小程序|微信小程序云开发快速入门手册-告别切图仔的时刻到了