微信小程序---快速上手云开发
<h1 id="一初识云开发">一、初识云开发</h1><p>官方文档</p>
<ul>
<li>小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。</li>
<li>开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。</li>
<li>开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发</li>
<li>目前云开发包含：<font color="red">云数据库，云函数，云存储，云调用</font></li>
</ul>
<h3 id="优势">优势</h3>
<ul>
<li>无需搭建服务器，只需使用平台提供的各项能力，即可快速开发业务。</li>
<li>无需管理证书、签名、秘钥，直接调用微信 API 。复用微信私有协议及链路，保证业务安全性。</li>
<li>支持环境共享，一个后端环境可开发多个小程序、公众号、网页等，便捷复用业务代码与数据。</li>
<li>开发者可以使用任意语言和框架进行代码开发，构建为容器后，快速将其托管至云开发。</li>
<li>支持按量计费模式，后端资源根据业务流量自动扩容，先使用后付费，无需支付闲置成本。</li>
</ul>
<h3 id="能力">能力</h3>
<ol>
<li>
<p>储存数据与文件</p>
<ul>
<li><font color="red"> 云数据库：</font> 文档型数据库，稳定可靠；支持在小程序端和云函数中调用。</li>
<li><font color="red">存储：</font> 云端文件存储，自带 CDN 加速，支持在前端直接上传/下载，可在云开发控制台可视化管理。</li>
</ul>
</li>
<li>
<p>运行后端代码</p>
<ul>
<li><font color="red">云函数：</font> 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码。</li>
<li><font color="red">云托管：</font> 支持托管服务容器，不限框架和语言，常驻运行、天然鉴权，可快速进行业务迁移</li>
</ul>
</li>
<li>
<p>扩展能力</p>
<ul>
<li><font color="red">静态网站：</font> 快速部署网站，支持自定义域名、网站防刷等配置。</li>
<li><font color="red">内容管理（CMS）：</font> 一键部署，可视化管理文本、Markdown、图片等多种内容，使用云数据库读取数据并使用数据。</li>
</ul>
</li>
<li>
<p>打通微信生态</p>
<ul>
<li>
<p><font color="red">云调用：</font> 云函数内免鉴权调用小程序开放接口，包括服务端调用、获取开放数据等能力。</p>
</li>
<li>
<p><font color="red">微信支付：</font> 免鉴权、免签名计算、免 access_token，在云函数内原生调用微信支付接口。</p>
</li>
<li>
<p><font color="red">环境共享：</font> 跨账号资源和能力复用，可授权云开发资源给其他小程序/公众号使用。</p>
</li>
</ul>
</li>
</ol>
<h3 id="比较">比较</h3>
<table>
<thead>
<tr>
<th style="text-align: left">内容</th>
<th style="text-align: left">云开发</th>
<th style="text-align: left">传统开发</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">开发语言</td>
<td style="text-align: left">node.js</td>
<td style="text-align: left">java,php....</td>
</tr>
<tr>
<td style="text-align: left">难易程度</td>
<td style="text-align: left">简单</td>
<td style="text-align: left">复杂</td>
</tr>
<tr>
<td style="text-align: left">开发周期</td>
<td style="text-align: left">1-5周</td>
<td style="text-align: left">1-5月</td>
</tr>
<tr>
<td style="text-align: left">部署难度</td>
<td style="text-align: left">基本不用部署(不需要：域名，备案，https)</td>
<td style="text-align: left">部署费时费力(需要：域名，备案，https)</td>
</tr>
<tr>
<td style="text-align: left">适合项目</td>
<td style="text-align: left">中小型项目</td>
<td style="text-align: left">大型项目</td>
</tr>
<tr>
<td style="text-align: left">费用</td>
<td style="text-align: left">免费版基本够用</td>
<td style="text-align: left">收费很高</td>
</tr>
</tbody>
</table>
<h1 id="二搭建云开发环境">二、搭建云开发环境</h1>
<p>下载稳定版本微信开发工具：具体操作可以看之前写的文章<br>
微信开发基础<br>
<strong>注意：这里我们建项目不使用云开发</strong></p>
<h3 id="开通云开发">开通云开发</h3>
<ol>
<li>
<p>点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118150743767-627240451.png" alt="" loading="lazy"></p>
</li>
<li>
<p>如果是第一次创建需要给云开发环境取名</p>
</li>
<li>
<p>获取云开发环境id</p>
</li>
</ol>
<h3 id="初始化云开发环境">初始化云开发环境</h3>
<p>在app.js里写入环境id,注意这里要用你自己的云开发环境id</p>
<ol>
<li>
<p>初始化云开发环境前，先去云开发控制台，拿到云开发环境id，如下图<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118150803800-36852083.png" alt="" loading="lazy"></p>
</li>
<li>
<p>拿到环境id以后，就去app.js里做云开发环境初始化，如下</p>
</li>
</ol>
<pre><code>```
// 小程序启动就会执行
onLaunch() {
// 连接云开发
wx.cloud.init({
env:'云开发环境id',//云开发环境id
})
},
```
</code></pre>
<p><strong>注意：</strong>用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.</p>
<h1 id="三云开发">三、云开发</h1>
<h2 id="一云数据">一、云数据</h2>
<h3 id="1在云数据库里新建集合">1、在云数据库里新建集合</h3>
<p>新建一个goods表<br>
点击 云开发=<mark>》数据库</mark>=》添加====》添写集合名称<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118150831193-1378196652.png" alt="" loading="lazy"></p>
<h3 id="2数据库权限分配">2、数据库权限分配</h3>
<p>让用户查询到我们创建的goods数据，需要把权限改为所有用户可读</p>
<ul>
<li>仅创建者可读写：管理员创建了这条数据，普通用户无法读写</li>
<li>所有用户可读：不管谁创建的数据，所有人都可以读<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118150924752-577742320.png" alt="" loading="lazy"></li>
</ul>
<h3 id="3数据库增删改查操作">3、数据库增、删、改、查操作</h3>
<h4 id="3-1查询-get">3-1查询 get()</h4>
<h5 id="1-基础查询get">1. 基础查询get()</h5>
<p>传统写法</p>
<pre><code>wx.cloud.database().collection('goods')
.get({
// 请求成功
success(res){
console.log('请求成功',res)
},
// 请求失败
fail(err){
console.log('请求失败',err)
}
}) //查询
</code></pre>
<p>ES6简写</p>
<pre><code>wx.cloud.database().collection('goods')
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{})
</code></pre>
<p>传统写法需要在外部定义一个参数存放<code>this</code>然后才能在回调函数里setData，而es6直接可以在查询结果里设置数据<code>this.setData</code><strong>推荐使用ES6写法</strong></p>
<h5 id="2-条件查询-where">2. 条件查询 where()</h5>
<p>在where里面包裹需要查询的条件对象，如：<code>where({name:'苹果'})</code></p>
<pre><code> wx.cloud.database().collection('goods')
.where({name:'苹果'})//条件查询
.get()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
</code></pre>
<h5 id="3-查询单条数据-doc">3. 查询单条数据 doc()</h5>
<p><font color="red">主要用于根据id查询相关数据</font></p>
<ul>
<li>doc是用来查询单条数据的。比如商品详情页。</li>
<li>doc里面用到的参数就是我们数据里的_id字段</li>
</ul>
<pre><code> wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//条件查询
.get()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
</code></pre>
<h5 id="4-数据库排序orderby">4. 数据库排序orderBy()</h5>
<p>orderBy方法在做排序的时候，接受两个参数</p>
<ol>
<li>根据那个字段排序</li>
<li>排序规则（升序或者降序）。升序用asc，降序用desc<br>
如我们根据商品价格从低到高升序排列</li>
</ol>
<pre><code> wx.cloud.database().collection('goods')
.orderBy('price',asc)
.get()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
</code></pre>
<h5 id="5-返回指定条数的数据limit">5. 返回指定条数的数据limit()</h5>
<p>limit用来指定查询结果集数量上限。</p>
<pre><code> wx.cloud.database().collection('goods')
.limit(3)
.get()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
</code></pre>
<h5 id="6-分页方法skip">6. 分页方法skip()</h5>
<p>skip指定查询返回结果时从指定序列后的结果开始返回，常用于分页。<br>
比如我们有100条数据，想从第10条开始返回数据，可以通过skip(10)来实现。<br>
查询第三页诶也四条</p>
<pre><code> wx.cloud.database().collection('goods')
.limit(4)
.skip(12)
.get()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
</code></pre>
<p>比如我们有100条数据，每次返回20条数据。那么就可以分5页返回。</p>
<ul>
<li>第1页 limit(20).skip(0)</li>
<li>第2页 limit(20).skip(20)</li>
<li>第3页 limit(20).skip(40)</li>
<li>第4页 limit(20).skip(60)</li>
<li>第5页 limit(20).skip(80)</li>
</ul>
<h5 id="7-command数据库操作符">7. Command数据库操作符</h5>
<table>
<thead>
<tr>
<th style="text-align: left">查询指令</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">eq</td>
<td style="text-align: left">等于</td>
</tr>
<tr>
<td style="text-align: left">neq</td>
<td style="text-align: left">不等于</td>
</tr>
<tr>
<td style="text-align: left">lt</td>
<td style="text-align: left">小于</td>
</tr>
<tr>
<td style="text-align: left">lte</td>
<td style="text-align: left">小于或等于</td>
</tr>
<tr>
<td style="text-align: left">gt</td>
<td style="text-align: left">大于</td>
</tr>
<tr>
<td style="text-align: left">gte</td>
<td style="text-align: left">大于或等于</td>
</tr>
<tr>
<td style="text-align: left">in</td>
<td style="text-align: left">字段值在给定数组中</td>
</tr>
<tr>
<td style="text-align: left">nin</td>
<td style="text-align: left">字段值不在给定数组中</td>
</tr>
</tbody>
</table>
<p>举例：查询大于30的数</p>
<pre><code>const db = wx.cloud.database().collection('goods')
const _ = db.command
db.collection('todos')
.where({
price: _.gt(30)
})
.get({
success: function(res) {
console.log(res.data)
}
})
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">逻辑指令</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">and</td>
<td style="text-align: left">且</td>
</tr>
<tr>
<td style="text-align: left">or</td>
<td style="text-align: left">或</td>
</tr>
<tr>
<td style="text-align: left"><code>price: _.eq(0).or(_.eq(100))</code></td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<h4 id="3-2添加-add">3-2添加 add()</h4>
<p>通过add可以实现数据的添加<br>
添加是一个对象，对象里包含需要添加的data数据</p>
<pre><code> wx.cloud.database().collection('goods')
.add({
data:{
name:'名称',
price:'价格'
}
})
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
})
</code></pre>
<h4 id="3-3修改update">3-3修改update()</h4>
<p>修改数据库里已存在的数据，根据查询结果修改相关数据<br>
例如：结合doc进行修改单条数据</p>
<pre><code> wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//条件查询
.update({
data:{
price:10
}
})
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
})
</code></pre>
<h4 id="3-4删除remove">3-4删除remove()</h4>
<p>删除数据，结合doc删除单条数据</p>
<pre><code> wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//条件查询
.remove()
.then(res=>{
// 请求成功
console.log('请求成功',res)
})
})
</code></pre>
<h3 id="4数据的导入和导出-------------------">4、数据的导入和导出-------------------</h3>
<p>. 数据导出，做数据备份<br>
. 数据导入，为了快速的大量的创建一些数据。<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118151032281-701910756.png" alt="" loading="lazy"><br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118151057495-1112671479.png" alt="" loading="lazy"></p>
<h2 id="二云函数">二、云函数</h2>
<ul>
<li>云函数也是运行在服务器上的，只不过和我们传统开发语言相比。</li>
<li>微信官方为我们提供的傻瓜式的一键部署。</li>
<li>只需要把心思花在业务逻辑代码的编写上即可。</li>
<li>无需关心写好如何部署，无需关心安全问题，无需关心鉴权问题。</li>
</ul>
<h3 id="1云函数优点">1、云函数优点</h3>
<p>云函数属于管理端，在云函数中运行的代码拥有不受限的数据库读写权限和云文件读写权限。<br>
需特别注意，云函数运行环境即是管理端，与云函数中的传入的 openId 对应的微信用户是否是小程序的管理员 / 开发者无关。</p>
<table>
<thead>
<tr>
<th style="text-align: left">操作</th>
<th style="text-align: left">云函数</th>
<th style="text-align: left">云数据库</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">返回数据上限</td>
<td style="text-align: left">100条</td>
<td style="text-align: left">20条</td>
</tr>
<tr>
<td style="text-align: left">更新数据</td>
<td style="text-align: left">都可以更新</td>
<td style="text-align: left">只有自己创建的才可以更新</td>
</tr>
<tr>
<td style="text-align: left">删除数据</td>
<td style="text-align: left">都可以删除</td>
<td style="text-align: left">只有自己创建的才可以删除</td>
</tr>
<tr>
<td style="text-align: left">运行环境</td>
<td style="text-align: left">运行在云端Node.js环境</td>
<td style="text-align: left">运行在小程序本地</td>
</tr>
<tr>
<td style="text-align: left">实现功能丰富度</td>
<td style="text-align: left">非常丰富</td>
<td style="text-align: left">只能实现数据库增删改查</td>
</tr>
</tbody>
</table>
<h3 id="2云函数创建过程">2、云函数创建过程</h3>
<ol>
<li>配置云函数</li>
<li>编写云函数</li>
<li>一键部署云函数</li>
<li>调用云函数</li>
</ol>
<h4 id="1-配置云函数">1-配置云函数</h4>
<ol>
<li>
<p>创建一个文件夹cloud和pages平行</p>
</li>
<li>
<p>在project.config.json里面配置云函数所在目录为cloud</p>
<pre><code>"cloudfunctionRoot":"/cloud"
</code></pre>
<p>然后点击保存，我们的cloud文件夹前面就有一个云朵表示配置云函数文件成功</p>
</li>
<li>
<p>选中cloud文件===》新建Node.js云函数（右键）</p>
</li>
<li>
<p>创建成功后，工具会提示是否立即本地安装依赖，确定后工具会自动安装 wx-server-sdk。</p>
</li>
</ol>
<h4 id="2-编写云函数">2-编写云函数</h4>
<ul>
<li>event: 指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid 和小程序的 appid。</li>
<li>context: 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况<pre><code>// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
return {}
}
</code></pre>
</li>
</ul>
<p><strong>注意：可能存在问题</strong></p>
<p>报错1：<font color="red">Error: errCode: -404011 cloud function execution error Cannot find module 'wx-server-sdk'</font></p>
<pre><code>npm install --save wx-server-sdk@latest
</code></pre>
<p>报错2：<font color="red">errMsg:Evenironment not fount</font><br>
出现原因：如果你有两个云开发环境，偶尔会出现上所示的问题。<br>
解决问题：有两种</p>
<ol>
<li>在云函数里指定你要使用那个云开发环境<pre><code>// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'云开发环境id'
})
// 云函数入口函数
exports.main = async (event, context) => {
return cloud.database().collection('goods').get()
}
</code></pre>
</li>
<li>使用DYNAMIC_CURRENT_ENV常量 （提倡使用这个）<pre><code> cloud.init({
env:cloud.DYNAMIC_CURRENT_ENV
})
</code></pre>
</li>
</ol>
<h5 id="1云函数获取数据">1、云函数获取数据</h5>
<p>小程序调用数据库只能返回20条数据<br>
云函数可以返回100条数据</p>
<pre><code>// 云函数入口函数
exports.main = async (event, context) => {
return cloud.database().collection('goods').get()
}
</code></pre>
<h5 id="2云函数修改数据">2、云函数修改数据</h5>
<p>. 小程序直接调用数据库修改会有问题<br>
只能修改自己创建的数据，别人创建的数据，就没有办法修改了。</p>
<p><strong>如何解决呢？</strong><br>
用云函数来修改就可以解决这个问题啦。</p>
<ol>
<li>
<p>先创建云函数updateGoods</p>
<pre><code>exports.main = async (event, context) => {
return cloud.database().collection('goods')
.doc(event.id)
.update({
data:{
price:event.price
}
})
}
</code></pre>
</li>
<li>
<p>调用云函数就行修改</p>
<pre><code>wx.cloud.callFunction({
name:'updateGoods ',
data:{
id:id,
price:1
}
}).then(res=>{})
</code></pre>
</li>
</ol>
<h5 id="3云函数删除数据">3、云函数删除数据</h5>
<p>创建一个删除商品的云函数</p>
<pre><code>exports.main = async (event, context) => {
return cloud.database().collection('goods')
.doc(event.id)
.remove()
}
</code></pre>
<h4 id="3-一键部署云函数">3-一键部署云函数</h4>
<p><img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118151249347-1752863035.png" alt="" loading="lazy"></p>
<h4 id="4-调用云函数">4-调用云函数</h4>
<pre><code>Cloud.callFunction(object: Object): Promise<Object>
</code></pre>
<p>调用云函数参数</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: center">类型</th>
<th style="text-align: center">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">name</td>
<td style="text-align: center">string</td>
<td style="text-align: center">是</td>
<td style="text-align: left">云函数名</td>
</tr>
<tr>
<td style="text-align: left">data</td>
<td style="text-align: center">Object</td>
<td style="text-align: center">否</td>
<td style="text-align: left">传递给云函数的参数，在云函数中可通过 event 参数获取</td>
</tr>
<tr>
<td style="text-align: left">config</td>
<td style="text-align: center">Object</td>
<td style="text-align: center">否</td>
<td style="text-align: left">配置</td>
</tr>
</tbody>
</table>
<h2 id="一云存储">一、云存储</h2>
<ul>
<li>存储就是可以用来存储视频，音频，图片，文件的一个云存储空间。</li>
<li>如果你的小程序需要用到视频播放，音频播放，图片展示，文件上传与下载功能，就可以用到我们的云存储了。</li>
<li>使用云存储来存储文件时，文件名的命名有一些规则，建议看一下。
<ul>
<li>不能为空</li>
<li>不能以/开头</li>
<li>不能出现连续/</li>
<li>编码长度最大为850个字节</li>
<li>推荐使用大小写英文字母、数字，即和符号 -，!，_，.，* 及其组合</li>
<li>不支持 ASCII 控制字符中的字符上(↑)，字符下(↓)，字符右(→)，字符左(←)，分别对应 CAN(24)，EM(25)，SUB(26)，ESC(27)</li>
<li>如果用户上传的文件或文件夹的名字带有中文，在访问和请求这个文件或文件夹时，中文部分将按照 URL Encode 规则转化为百分号编码。</li>
<li>不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制</li>
<li>可能需特殊处理后再使用的特殊字符: ， : ; = & $ @ + ?（空格）及ASCII 字符范围：00-1F 十六进制（0-31 十进制）以及7F（127 十进制）</li>
</ul>
</li>
</ul>
<h3 id="1云开发控制台管理文件">1、云开发控制台管理文件</h3>
<p>控制台也可以很方便的管理文件<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220118151323907-343849101.png" alt="" loading="lazy"></p>
<h3 id="2上传图片到云存储">2、上传图片到云存储</h3>
<ol>
<li>我们上传图片之前需要先选择图片，所以这里用到一个图片选择的功能</li>
</ol>
<pre><code>wx.chooseImage(Object object)
</code></pre>
<p>对应的官方文档：</p>
<pre><code>wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
</code></pre>
<ol>
<li>然后调用文件上传的api接口即可</li>
</ol>
<pre><code>wx.cloud.uploadFile
</code></pre>
<p>将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写</p>
<pre><code>wx.cloud.uploadFile({
cloudPath: 'example.png',
filePath: '', // 文件路径
}).then(res => {
// get resource ID
console.log(res.fileID)
})
</code></pre>
<h3 id="3下载文件">3、下载文件</h3>
<p><strong>下载</strong><br>
使用wx.cloud.downloadFile下载文件<br>
<strong>下载并打开word，excel，pdf</strong><br>
使用wx.openDocument打开文件</p><br><br>
来源：https://www.cnblogs.com/ypSharing/p/15817954.html
頁:
[1]