- ArthurSlog
- SLog-71
- Year·1
- Guangzhou·China
- Sep 12th 2018
- ArthurSlog Page
- GitHub
- NPM Package Page
- 掘金主页
- 简书主页
- segmentfault
道常无为而无不为
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
- 小程序官方文档
- 小程序端API文档（客户端）
- 云端API文档（服务端）
前言
- ”云开发“ 封装好了一些常用的业务逻辑，提供了以下方面的相关API供开发者使用：
- 云函数
- 数据库
- 存储管理
开始编码
- 现在先把微信开发工具更新至最新（1.02.1809101），有部分开发人员在微信社区反馈更新之后没有看到“云开发”的按钮
- 解决办法：点击检查更新，等待更新完全完成之后重启开发工具
- 重点：云开发方式需要appid，请准备好
- 当前云开发模版的微信小程序文件结构如下：
cloudfunctions| - login| - index.js| - package.json| - package-lock.json| - arthurSlog_getInfo| - index.js| - package.json| - package-lock.json| - arthurSlog_methodAdd| - index.js| - package.json| - package-lock.jsonminiprogram| - images| - code-db-inc-dec.png| - code-db-onAdd.png| - code-db-onQuery.png| - code-db-onRemove.png| - code-func-sum.png| - console-entrance.png| - create-collection.png| - pages| - addFunction| - addFunction.js| - addFunction.json| - addFunction.wxml| - addFunction.wxss| - chooseLib| - chooseLib.js| - chooseLib.json| - chooseLib.wxml| - chooseLib.wsxx| - databaseGuide| - databaseGuide.js| - databaseGuide.json| - databaseGuide.wxml| - databaseGuide.wxss| - deployFunctions| - deployFunctions.js| - deployFunctions.json| - deployFunctions.wxml| - deployFunctions.wxss| - index| - index.js| - index.wxml| - index.wxss| - user-unlogin.png| - storageConsole| - storageConsole.js| - storageConsole.json| - storageConsole.wxml| - storageConsole.wxss| - userConsole| - userConsole.js| - userConsole.json| - userConsole.wxml| - userConsole.wxss| - style| - guide.wxss| - app.js| - app.json| - app.wxssREADME.md
project.config.json- 在使用“云开发”的时候，需要先调用 初始化函数 init
- 小程序端的初始化函数是 wx.cloud.init()
- 云端的初始化函数是 const cloud = require('wx-server-sdk') cloud.init())
Client：
miniprogram/app.js
//app.js
App({onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({env: 'arthurslog-test-d4537a',traceUser: true,})}this.globalData = {}}
})Server:
cloudfunctions/arthurSlog_getInfo/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async(event, context) => {return event.userInfo
}- 上面的Server端代码中
Server:
cloudfunctions/arthurSlog_getInfo/index.js
// 云函数入口文件
//const cloud = require('wx-server-sdk')//cloud.init()// 云函数入口函数
exports.main = async(event, context) => {return event.userInfo
}- 没有调用到 “wx-server-sdk” 的方法，所以可以注释掉，不影响结果
- 这里提醒一下，就是 cloudfunctions 路径下的文件的名称，就是云端向小程序端提供的方法
- 举个栗子：对于cloudfunctions/arthurSlog_getInfo来说，arthurSlog_getInfo这个文件夹的名字就是云端向小程序端提供的方法
- 现在在小程序端就可以参考小程序端API文档（客户端）
- 大部分函数都来源于 对象“wx”，这个 “wx”对象 就类似于服务端的 “wx-server-sdk”对象
- 比如，在小程序端（客户端）有 wx.cloud.callFunction（）、wx.cloud.uploadFile（）等方法
- 再比如，在云端（服务端）有 cloud.init()、cloud.database()、cloud.collection（）等方法
- 现在，我们来接触一下 “小程序·云开发” 的 “存储管理功能”
- 打开小程序端的 miniprogram/pages/index/index.js
Client
miniprogram/pages/index/index.js
Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: '',fileID: '',cloudPath: '',imagePath: './user-unlogin.png',},// ...// ...// ...// 添加前端代码,向云端上传图片arthurSlog_uploadImg: function() {// 选择图片const this_ = thiswx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePathsthis_.setData({imagePath: tempFilePaths[0],})console.log(tempFilePaths[0])}})},
})- 在这里，我们定义了一个方法arthurSlog_uploadImg，参考 小程序官方文档
- 首先将当前环境对象 映射 给对象 this_
Client
miniprogram/pages/index/index.js
const this_ = this- 使用 wx.chooseImage 方法，打开本地文件，选择要上传的文件
- 在success函数里，使用setdata函数，更新 imagePath 对象的值，并使得页面上对应的部分重新渲染
- 现在，我们来更新页面文件：
Client
miniprogram/pages/index/index.wxml
<!--index.wxml-->
<view class="container"><!-- ... --><!-- 获取 openid --><view class="uploader"><button class="userinfo-nickname" bindtap="arthurSlog_getInfo">点击获取 openid</button></view><!-- 返回两个对象之和 --><view class="uploader"><button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">点击返回两个对象之和</button></view><!-- 上传图片 --><view class="uploader"><button class="userinfo-nickname" bindtap="arthurSLog_uploadImg">上传图片</button></view><!-- 显示图片 --><view><image class="img" src="{{imagePath}}" mode="scaleToFill"></image></view></view>- 这次使用的方法，不需要自己编写云端服务代码，腾讯公司已经提供了
- 保存文件，在模拟器中点击上传图片（我放了一张演示图片在此路径下：miniprogram/images/ArthurSlog.png）
- 选中要上传的文件，点击“打开”
- 正常执行之下，会显示出我们刚刚上传的图片，到这里暂停一下，现在图片还没发送出去
- 在下一篇中，再继续补充
- 至此，我们实现了一个选取本地文件，并显示选中的图片文件。
