什么是小程序云开发-及云开发功能讲解-🎉🎉🎉

一tiao咸鱼
1,906 阅读6分钟

前言

本章主要讲解小程序云开发以及自己的一些分享

游泳健身了解一下：github 本期项目并没有上传到github 需要的加QQ群询问。我看到就会发给你

下期讲解‘js‘基础进阶，年底总结，以及附上自己的云开发代码\color{red}{下期讲解`js`基础进阶，年底总结，以及附上自己的云开发代码}

内容总结

  1. 云开发带来的好处（微信亲儿子带来一些优势）
  2. 劣势是啥
  3. 云数据库
  4. 图片上传 小程序云存储 （云函数（node.js）koa2）,云调用）
  5. 组件外部引入（css）iconfont
  6. 如何封装一个好用的ajax 的使用
  7. 浅谈
  8. 云函数之 外部调用（常用操作） 这先不讲了 需要的加QQ

云开发

小程序云开发是微信提供的一个快速开发（serverless）函数式开发。我们不需要担心后端的资源（cpu，内存等问题），运维开发等问题，只需要关注自己的业务问题。只需要支付微信爸爸的钱就可以解决。 云开发带来一些优势，

  1. 微信sdk基本兼容云调用,
  2. 小程序上线域名只能是https且必须经过ICP备案，云开发可以不依托外部云服务器，这样项目就可以快速上线
  3. 基础版免费使用，个人项目（真香）
  4. 云调用可以直接获取OPENID,APPID,UNIONID
  5. 云函数天然优势，不需要access_token，直接改变用户登录方式（以及使用方式）

6. 开发效率提升，如果是对小程序进行扩展开发（原来就有项目）不需要修改接口云函数帮你搞定原接口的兼容。
7. 前端可以自己进行一些自己的服务端操作，云还是支持其他一些操作

云开发的劣势

  1. 云数据库权限比较简单，云数据库获取数据的限制，以及读写的限制，小程序 => 云数据库一次最多20条数据。云函数 => 云数据库一次最多100条数据
  2. CDN流量少比起外面的CDN要贵很多
  3. 一般我们开发项目总会有一个后台管理系统，管理系统调用当前云函数，云数据库都是需要算在配置里面的，所以从价格方面考虑，个人项目很香，日活用户非常多，又不想花费用升级云开发的配置，那么小程序云开发并不太适合，如果你的日活用户不是太多，基础版的云函数请求足够用的话，那么你可以使用小程序云开发，来减少一些复杂的流程，搭配外部服务器，效果极佳。个人认为公司项目一个月几百的开销应该还是可以接受
  4. （以上均属于个人观点）

云数据库

云数据库基本操作可以查看小程序云数据库地址我们上面说到云数据库最多可以调用100条数据下面讲讲如何进行操作更多的数据。总体就是查询当前总长度然后算出当前需要请求次数，然后进行一个重复请求，然后返回前端，这样达到超过100数据。主要我们必须是一个 async await 的异步转同步，和koa2差不多 下面会讲 tcb-router 基本和 koa2-router 差不多。（请求多个Promise.all很好用）

首先我们先创建一个云函数，初始化云函数，初始化我们的数据库，创建自己的这个表

const cloud = require('wx-server-sdk') // 微信sdk
cloud.init() // 初始化
const db = cloud.database() // 链接我们的云数据库
const playlistCollection = db.collection('playlist') // 链接我们创建的这个表
const MAX_LIMIT = 100 // 默认查找每次100条数据
// 云函数入口函数
exports.main = async (event, context) => {
    // 找到当前我们总的条数
    const total = await playlistCollection.count().total
    // 向上取整 获取我们总的次数
    const batchTimes = Math.ceil(total / MAX_LIMIT)
    const tasks = []
    for (let index = 0; index < batchTimes; index++) {
        // skip 当前开始的位置 
        // limit 要获取多少条
        // get 进行获取
    	let promise = playlistCollection.skip(i*MAX_LIMIT).limit(MAX_LIMIT).get();
    	tasks.push(promise)
    }
	let list = []
	if(tasks.length>0){
	    list = await Promise.all(tasks)
	}
	return {
	    list
	}
}

图片上传

下面我们讲解一个图片上传，先附上流程图

	/**
	 * 上传图片 小程序 => 微信sdk 获取临时图片地址 
	 * @param {dom} event 
	 */
	onChooseImage(event){
		wx.chooseImage({
			count: 9, // 上传数量
			sourceType: ['album', 'camera'],
			sizeType: ['original', 'compressed'],
			success:(res)=>{
				const imageList = this.data.imageList.concat(res.tempFilePaths)
				this.setData({
					imageList
				})
			}
		})
	},


// 小程序 => 云存储
// 小程序对 uploadFile 的封装
// regeneratorRuntime 才可以使用  async  await 下面可以使用 Promise.all
import regeneratorRuntime from '../utils/runtime'
const imageUpload = async (imageList)=>{
	let fileListId = [];
	wx.showLoading({
		title: '图片上传中',
		mask: true
	})
	for (let index = 0; index < imageList.length; index++) {
		const element = imageList[index];
		let suffix = /\.\w+$/.exec(element)[0]
		await wx.cloud.uploadFile({
			cloudPath: `blog/${Date.now()}-${Math.floor(Math.random()*100000)}${suffix}`,
			filePath: element, // 文件路径
		}).then(res => {
			fileListId.push(res.fileID)
		}).catch(error => {
			console.log('error',error)
		})
	}
	wx.hideLoading()
	return fileListId
}

export {
	imageUpload
}

/**
 * 上传
 * debounce 防重复 
 * BlogSave 封装好的上传图片 小程序 => 云函数 后面会讲
 */
send: debounce(async function(event){
	const imageList = await imageUpload(this.data.imageList)
	BlogSave({
		data: {
			imageList,
		}
	}).then(res=>{
		wx.navigateBack({
			delta: 1
		})
	})
}),


// 云函数 => 云数据库 
// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router');
cloud.init()
const db = cloud.database();
const ImageCollection = db.collection('Image')
// 云函数入口函数
exports.main = async (event, context) => {
	const wxContext = cloud.getWXContext()
	const app = new TcbRouter({event})
	app.router('save',async  (ctx,next)=>{
		let {imageList} = event;
		// 调用云数据库
		ctx.body = await ImageCollection.add({
			data: {
				imageList,
				openid: wxContext.OPENID,
				createTime: Date.now()
			}
		})
	})
	return app.serve()
}

组件内部引用外部css

Component({
    // 方法1
    options:{
		styleIsolation: "apply-shared",
	},

    // 方法2
    externalClasses: ['tag-class'], // 接收外部传入的样式 
    
    // 方法3 在 css 直接引入
    @import './iconfont.wxss'
})

小程序 云函数调用 “ajax”

// ajax封装
import regeneratorRuntime from '../utils/runtime'
const wxHttp = async function (options){
	if (options.loading){
		wx.showLoading(options.loading)
	}
	return await wx.cloud.callFunction({
		name: options.name,
		data: {
			...options.data
		}
	}).then(res=>{
		if (options.loading){wx.hideLoading()};
		if (options.toast){wx.showToast(options.toast)};
		// console.log(res)
		if(res.errMsg==="cloud.callFunction:ok"){
			return res.result
		}else{
			wx.showToast({
				title: '系统错误请等待',
				duration: 2000
			})
			Promise.reject(`${options.data.$url}，当前接口请求失败，当前请求数据为（\n ${JSON.stringify(options.data)} \n）`)
		}
	})
}

export{
	wxHttp,
}

// Interface
import regeneratorRuntime from '../utils/runtime'
import {loading,toast} from '../utils/ajaxSetting'
import {wxHttp} from '../ajax/ajax'
//  新增博客
const BlogSave = async ({...options})=>{
	return wxHttp({
		name: 'blog',
      	data: {
			$url: 'save',
			...options.data
		},
		loading: loading(options.loading),
		// loading: options.loading===false? false : loading(true),
		// toast: options.toast===false? false :toast(true)
	})
}

// ajaxSetting 内置loading 和 toast 使用方式
const loading = (option)=>{
	let loading = {
		title: '加载中',
		mask: true
	}
	if(typeof option === 'boolean'&&option===true){
		return loading
	}else if(typeof option === 'string'){
		loading.title = option;
		return loading
	}else if(typeof option === 'object'){
		return Object.assign(loading,option)
	}
	return false
}

const toast = (option)=>{
	let toast = {
		title: '操作成功',
		duration: 2000
	}
	if(typeof option === 'boolean'&&option===true){
		return toast
	}else if(typeof option === 'string'){
		toast.title = option;
		return toast
	}else if(typeof option === 'object'){
		return Object.assign(toast,option)
	}
	return false
}

export {
	loading,
	toast
}

浅谈

组件

我刚用到js组件化的时候用require.js module.exports 后来es6的import export default,刚开始理解组件化就是可以复用性，就是可以重复使用，随着更加深入的理解，组件化并非一定要复用，或者是相对独立的一个模块，我们也可以抽出为一个组件。组件传入的参数不宜过多，最好都有默认值。组件的显示与隐藏，重绘和回流一些性能的优化，都展示了自己的一些能力。重复循环组件是否需要添加当前key key 的作用,当组件循环次数过多怎样进行优化（1.减少dom数量，2.事件劫持，3.dom层级）这些都需要我们进行一些考虑

小程序潜力

2019 年，小程序的日活用户数到达 3.3 亿，预计 2020 年会达到 4.5 亿。2019 年小程序的交易 GMV 达到了 1.2 万亿，交易 GMV 过百亿的企业数量已有 5 家。未来小程序的使用会更加多。毕竟微信是小程序的载体。

小程序bug汇总

  1. new Date跨平台兼容性问题
  2. wx.getUserInfo()接口更改问题
  3. 无法获取UnionID的问题
  4. 图片本地资源名称，尽量使用小写命名
  5. 小程序原生组件textarea,canvas 层级
  6. ...较多可以掘金搜索一下

最后

能看到最后🙏谢谢大家了，多多点赞在github 上面对❤️是对我最好对鼓励，我会尽量分享一些自己使用得心得以及正确对食用方式

可能现在小伙伴还是不懂。。俗话说;师傅领进门,修行在个人。代码上的备注写的也够多了。还是不懂的可以加群问问小伙伴们，

求靠谱内推（北京地区）可以留言我 +。=

avatar
文章
阅读
粉丝
相关推荐
云原生开发涅槃之路
2.4k阅读
 · 
0点赞
关于鸿蒙开发，我暂时放弃了
130k阅读
 · 
577点赞
Web和云开发，Rust会起飞？
12k阅读
 · 
64点赞
Intellij IDEA 插件开发 | 京东云技术团队
11k阅读
 · 
131点赞
[保姆级] Vue3 开发文档
88k阅读
 · 
2.2k点赞
预测2024年之后的前端开发模式
127k阅读
 · 
1.2k点赞
去哪儿网云开发落地
4.7k阅读
 · 
5点赞
Flutter低代码-Fair云开发平台实践
6.2k阅读
 · 
79点赞
打造云开发环境
1.6k阅读
 · 
1点赞
微信小程序--云开发仿QQ动态发布
3.8k阅读
 · 
5点赞

友情链接：