道常无为而无不为
现在先把微信开发工具更新至最新(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.json
miniprogram
| - 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.wxss
README.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:
cloudfunctions/arthurSlog_getInfo/index.js
// 云函数入口文件
//const cloud = require('wx-server-sdk')
//cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
return event.userInfo
}
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_ = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
this_.setData({
imagePath: tempFilePaths[0],
})
console.log(tempFilePaths[0])
}
})
},
})
Client
miniprogram/pages/index/index.js
const this_ = this
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>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章