swiper 组件无法自适应高 内容是图片 图片的mode 设置了 widthFix 属性 [代码]<swiper indicator-dots=[代码][代码]"{{indicatorDots}}"[代码][代码]  [代码][代码]autoplay=[代码][代码]"{{autoplay}}"[代码] [代码]interval=[代码][代码]"{{interval}}"[代码] [代码]duration=[代码][代码]"{{duration}}"[代码][代码]>[代码][代码]  [代码][代码]<block wx:[代码][代码]for[代码][代码]=[代码][代码]"{{imgUrls}}"[代码] [代码]wx:key=[代码][代码]"{{index}}"[代码][代码]>[代码][代码]    [代码][代码]<swiper-item>[代码][代码]      [代码][代码]<image src=[代码][代码]"{{item}}"[代码] [代码]class[代码][代码]=[代码][代码]"slide-image"[代码] [代码]style=[代码][代码]"width:100%"[代码] [代码]mode=[代码][代码]"widthFix"[代码][代码]/>[代码][代码]    [代码][代码]</swiper-item>[代码][代码]  [代码][代码]</block>[代码][代码]</swiper>[代码][代码]<button bindtap=[代码][代码]"changeIndicatorDots"[代码][代码]> indicator-dots </button>[代码][代码]<button bindtap=[代码][代码]"changeAutoplay"[代码][代码]> autoplay </button>[代码][代码]<slider bindchange=[代码][代码]"intervalChange"[代码] [代码]show-value min=[代码][代码]"500"[代码] [代码]max=[代码][代码]"2000"[代码][代码]/> interval[代码][代码]<slider bindchange=[代码][代码]"durationChange"[代码] [代码]show-value min=[代码][代码]"1000"[代码] [代码]max=[代码][代码]"10000"[代码][代码]/> duration[代码]

1、右上角胶囊按钮的背景颜色可以自定义吗？ 2、胶囊按钮的背景颜色是变换规则是怎么样的？

我查了查，小程序右上角的胶囊不允许被去掉，不允许自定义颜色背景大小等样式。 为了好看，我在左侧也放一个胶囊，一个返回，一个小房子。看起来还挺好看，但是右侧它自带的胶囊是根据背景动态改变颜色边框和背景的。 那么问题来了，左侧胶囊根据背景变化的样式的规则是什么样的，有没有个公式啥的，让我同步到左侧自定义的胶囊上。 小的拜上！！！

提到ios系统的橡皮筋效果，作为开发者是又爱又恨，有想要这个效果又有不想要的，无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题，这里分两部分（取消橡皮筋回弹效果和因为这个效果遇到的坑）和大家分享一下。   取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1   2) 页面有滚动区域，滚动区域通过view模拟实现，然后在页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯，没有scroll-view那种原生丝滑般的感觉。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2   3) 页面有滚动区域，滚动区域使用scroll-view,这时通过disableScroll则无法实现，尝试设置一下scroll-view的scroll-y="{{false}}"，上拉或下拉时居然不再触发橡皮筋的回弹啦，当然滚动区域也不能滚动。 小脑袋动一动，解决方法有啦！ 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动，从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true，再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理，具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域，scroll-view滚动更丝滑，不过每次滚动到底部或顶部的时候，再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉，暂时没想到好的解决方法，有解决的大佬希望提供一下想法，一起学习下。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3   IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动，会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了，反正我们团队目前是需要解决的，方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动，取消时再次开启滚动   2) 如果页面顶部有置顶的横向滚动区域scroll-view，当页面滚动到底部时继续上拉会导致置顶头部消失，松开回弹后头部又会出现。 坑是社区里的朋友提出来的，我借了个iphone x 一预览，我嚓，还是真是个奇坑！ 微信官方回复已复现正在解决中… 不想继续等下去的，暂时解决方法是 监听页面的滚动区域，当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。   写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享，示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug，但哪吒说 我命由我不由天，所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出，没有涉及到的坑也欢迎评论提出，一起学习和解决，后续也会基于此篇不断更新总结。

项目名称：校园二手购 项目介绍：我们开发的小程序名字叫做校园二手购，是一个专注于服务广州大学学生的平台。我们都知道，身为大学生，生活费有限，而有很多东西都是在大学生活中必须的。所以有很多学生乐意将目光投向二手交易平台。而我们的小程序，就是为了方便广大学生用户，不用在贴吧等地方发布二手交易，而是有一个官方的、专门的平台来提供给学生。小程序的使用者可以在校园二手购平台上发布闲置的物品，以供大家购买。用户可以浏览全部发布的商品，在自己喜欢的商品下面留言以取得和售主的联系，在双方都谈妥之后，就可以进行线下交易。用户可以在小程序上使用修改自己的个人信息，查看我的发布，查看我的收藏，查看我的足迹，查看新留言，申请学生认证等功能。还可以在首页上查看最火热的商品的排行榜，各种便宜好货，以及常见问题。本项目致力于为广州大学学生提供一个可以进行二手交易的平台，方便广州大学的学生进行各种二手物品的交易，让闲置的物品可以得到充分的利用，减少浪费。 目标用户：广州大学学生 应用场景：广州大学学生进行二手物品交易 实现思路：用户初次进入小程序就位用户随机取一个用户名和头像上传到user表，直到用户授权登录之后把信息修改为用户的微信信息，以实现用户的管理。用户在发布了商品之后，把商品的信息上传到goods表，以实现对商品的管理，这样就实现了最重要的两个部分的管理，其他的操作都是基于这两个表去进行的。 作品体验二维码 [图片] 联系方式：13030204802,13533203394 团队简介：本项目完全由广州大学两位在校学生开发完成。 架构图： [图片] 效果截图 首页：首页最上方的栏目是搜索栏，用户可以通过此搜索栏目来进行商品的检索下一个图片展示栏。 下一个图片展示栏。能够提供用户一个清晰的窗口，点击进去还能够看到商品的详情介绍。 第二个是菜单栏，方便用户进行各种常见操作。 第三我们还可以在商品推荐里面进行商品的简单分类。 [图片] 搜索：首页最上方的栏目是搜索栏，用户可以通过此搜索栏目来进行商品的检索 [图片] 商品详情：显示商品的详细信息，以及留言板块 [图片] 发布：用户发布商品可以有两种方式，第一种是直接点击底部的发布按钮，第二种是点击首页的发布按钮，都可以进去发布页面。 [图片] 分类：用户如果想要获取更多的商品分类的话，可以点击底部的菜单栏进去分类，进行分类商品的浏览 [图片] 便宜好货：用户可以在这里获取推荐的好货。 [图片] 热度排行榜：用户可以在这里获取热度排行前10的物品。 [图片] 用户页面：最重要的一个页面则是“我的”页面，点击底部菜单栏即可进去。 [图片] 我的发布：在我的发布页面，用户可以左滑商品进行商品状态的更改，如果商品状态改为已售出的话，那么这个商品就不会在主页上显示，用户还可以 删除已经发布的商品。 [图片] [图片] [图片] 我的收藏：  在我的收藏页面，用户可以看到已经收藏的商品，同理，用户可以左滑，取消收藏商品 [图片] 我的足迹：用户还可以进去我的足迹，看到浏览过的商品 [图片] 新留言：  用户可以进入新留言页面，来查看发布的商品是否有新的留言或者回复 [图片] 个人资料：还可以修改个人资料，还提供了积分机制，以便在将来进行功能的扩展 [图片] 学生认证：进行学生认证，以识别是否是本校学生。 [图片]

1.义思丽代办平台介绍 1.1 小程序介绍 用户可以通过此小程序提交个体工商户注册、公司注册、合作社注册、商标注册订单，平台管理员可以代用户办理对应的工商执照 1.2 主要功能 普通用户： 一，提交订单 1.个体户注册 2.有限公司注册 3.股份有限公司注册 4.合作社注册 5.商标注册 二，根据订单状态查询订单 三，修改被商家退回的的订单 四，身份信息管理（增删改查） 四，分享到好友或朋友圈海报获得得优惠 五，切换系统语言 普通管理员： 1.包括普通用户的功能 2.根据订单状态查看订单，处理订单 3.接收新订单通知、订单修改成功通知 4.退回填写错误的订单 超级管理员 1.包括普通管理员的功能 2.设置系统代办费用 3.管理商标注册分类信息 2.邀请、管理普通管理员 1.3 目标用户 1.需要个体户注册、公司注册、合作社注册、商标注册的个人或企业 2.需要通过小程序代办工商注册的企业 2.技术架构 小程序使用纯小程序云开发：云函数，云存储，云数据库等。通过连续两次下滑个人页面即可进入商户管理页面，只有商户管理员才能进入，进入之后可以处理订单，设置代办费用，邀请管理员等； 管理页面安全性：管理页的每一个操作在云函数中判断当前用户是否是管理员，这样普通用户即便是用技术手段进入到管理页面也无法实现管理员的功能；客户页： [图片] [图片] [图片] [图片][图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 商户管理页： [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片][图片] [图片] [图片] [图片] [图片] 4.体验小程序 以下是小程序体验版，可以扫码申请体验： [图片]

应用场景 我在跟朋友聊天，灵感来了 “我有个很应景的表情包，这时候我要是发出去的话，肯定很有意思” 于是我打开微信表情寻找，划呀划划呀划……过了大概30秒，我突然感觉有点头疼，这种感觉就像我今天下午跟女朋友玩1000张的拼图，里面的天空是一望无际的蓝色一样，让人奔溃。图还没找到，可是我们的话题已经来到了另一个世界。之前想找的那张表情就像我冰箱里龙眼，放了太久，还没拿出来吃就烂了。 有时候我知道表情包上写着什么，可是却没有办法搜索。 我手机相册里有从各种app上收集来的几百张表情图，每次想要发送一张，我就得在几百张图片中来回寻找，可谓众里寻他千某度。 生活已经很累了，就不要再徒增烦恼了。 所以就有了今天这个小程序：抽屉表情；就像名字一样，你想要的表情就在这个抽屉里，打开就能看到。 主要功能 上传表情图，管理你手机里的表情包。 给表情添加标签，通过标签快速搜索。 使用表情模板功能，超简单三步，表情配图并发送。 目标用户 我，以及跟我一样有上面烦恼的同学。 实现思路 为了达到低成本，高效率开发，服务端使用了小程序云函数三件套：云函数，数据库，云存储。 小程序端使用了小程序兼容层框架 Taro，使用前端流行的 react 框架开发。其特点是高效便捷。 使用了typescript增加代码质量与可维护性，使用了mobx作为状态管理工具，实现了更好的页面组件的数据流通信。 架构图 [图片] 效果截图 [图片] [图片] [图片] [图片][图片] [图片] [图片] 功能代码展示 import { observable, action } from 'mobx' import { TemplateIndexData } from 'src/types' /**  * 表情制作模块 store  */ export class MakeStore {     /**      * 首页数据      */     @observable indexData: TemplateIndexData[] = []     /**      * 设置首页的数据      */     @action.bound     setIndexData(data) {         this.indexData = data     }     /**      * 存储表情模板集合的map      * 用户缓存表情模板集合的数据，避免接口重复加载      */     @observable collectionMap: Map = new Map()     /**      * 存储表情模板的map      */     @observable templateMap: Map = new Map()     /**      * 设置模板集合      */     @action.bound     setCollection(data) {         this.collectionMap.set(data._id, data)         const { templates = [] } = data         templates.forEach(template => {             this.templateMap.set(template._id, template)         });     }     /**      * 获取单个模板集合      */     @action.bound     getCollection(id) {         return this.collectionMap.get(id)     }     /**      * 获取单个模板数据      */     @action.bound     getTemplate(id) {         return this.templateMap.get(id)     } } const makeStore = new MakeStore() export default makeStore import React, { Component } from 'react' import { View, Canvas, Textarea, Button, Input } from '@tarojs/components' import Taro, { getImageInfo } from '@tarojs/taro' import './edit.scss'; import { inject, observer } from 'mobx-react'; import { MemeTemplate, Store } from 'src/types'; type PageProps = {   store: Store } type PageState = {   loading: boolean,   canvasStyle: {     width: number,     height: number   },   /** 表情模板 */   template: MemeTemplate,   text?: string, } @inject('store') @observer class MakeEdit extends Component {   /** 开发模式，显示文字框与调试框 */   dev = false   ctx: Taro.CanvasContext   imgRatio = 1   image: getImageInfo.SuccessCallbackResult   /** 每1px（非物理像素） 等于多少 rpx */   pxOfRpx = 1   state: PageState = {     loading: false,     canvasStyle: {       width: 690,       height: 460     },     template: null as any   }   /**    * 由于图片显示时有可能进行缩放    * 所以需要计算出缩放后的文本框的位置与大小    */   get computedTextArea() {     const { x, y, w, h } = this.state.template.textArea     const result = {       x: x * this.imgRatio,       y: y * this.imgRatio,       w: w * this.imgRatio,       h: h * this.imgRatio,     }     return result   }   async loadImg() {     this.setState({ loading: true })     Taro.showLoading({       title: '加载中',       mask: true     })     const res = await Taro.getImageInfo({ src: this.state.template.url })     this.setState({ loading: false })     Taro.hideLoading()     return res   }   async onLoad(option) {     const template = this.props.store.make.getTemplate(option.id)     this.setState({ template })     //由于setState 不会马上执行，需要等待 setState 执行完成     await Promise.resolve()     const res = await this.loadImg()     const { screenWidth } = Taro.getSystemInfoSync()     /** 每1px 有多少 rpx */     this.pxOfRpx = 750 / screenWidth     this.image = res     this.ctx = Taro.createCanvasContext('canvas')     this.initCanvas()     this.drawContent()   }   initCanvas() {     const maxWidth = 690;     const maxHeight = 690;     const width = this.image.width * this.pxOfRpx     const height = this.image.height * this.pxOfRpx     /** 最大宽高与图片宽高的最小比值 */     const ratio = Math.min(maxWidth / width, maxHeight / height)     /** 图片需要缩放的比例，图片宽高没有超过最大宽高的话，不需要缩放 */     this.imgRatio = Math.min(ratio, 1)     this.setState({       canvasStyle: {         width: width * this.imgRatio,         height: height * this.imgRatio,       }     })   }   /**    * dev:绘制文本框    */   drawRect() {     const ctx = this.ctx     ctx.setStrokeStyle('red')     const { x, y, w, h } = this.computedTextArea     ctx.strokeRect(x, y, w, h)     ctx.draw(true)   }   /**    * 绘制文本    * 根据文本的长度，自动计算出字体大小。简化用户操作    */   drawText(lines) {     if (!lines.length) return     const textStyle = this.state.template.textStyle     const textColor = textStyle?.color || 'black'     let maxFontSize = textStyle?.maxFontSize || 50     const ctx = this.ctx     ctx.setTextBaseline("top")     ctx.setTextAlign("center")     ctx.setFillStyle(textColor)     const { x, y, w, h } = this.computedTextArea     let fontSize = maxFontSize     ctx.setFontSize(fontSize)     //计算出长度最长那行的值     const longestValue = lines.map(text => ctx.measureText(text).width).sort((a, b) => b - a)[0]     //文字行数 * 行高不能超过文本框高度，计算出最大字体大小     maxFontSize = Math.min(maxFontSize, h / lines.length / 1.2)     //根据比例，计算出最合适的字体大小     fontSize = Math.min(maxFontSize, w / longestValue * fontSize)     ctx.setFontSize(fontSize)     //逐行绘制     const lineHeight = fontSize * 1.2     for (const [index, text] of lines.entries()) {       ctx.fillText(text, x + w / 2, y + lineHeight * index)     }     ctx.draw(true)   }   async drawImg() {     const ctx = this.ctx     const { width, height } = this.state.canvasStyle     ctx.drawImage(this.image.path, 0, 0, width / this.pxOfRpx, height / this.pxOfRpx)     ctx.draw(true)   }   /**    * 绘制所有内容    */   drawContent() {     this.ctx.draw(false)     const text = this.state.text || ''     const lines = text.split('\n').filter(item => item).map(item => item.trim())     this.drawImg()     this.dev && this.drawRect()     this.drawText(lines)   }   /**    * 文本变化时绘制内容    */   handleTextChange = e => {     this.setState({       text: e.target.value     })     this.drawContent()   }   /**    * 将canvas上的内容生成临时文件，并且预览    */   previewImg() {     const ctx = this.ctx     //真机上如果没有操作，会无法draw成功     ctx.setStrokeStyle('red')     ctx.draw(true, () => {       Taro.canvasToTempFilePath({         canvasId: 'canvas',         success: function (res) {           Taro.previewImage({             urls: [res.tempFilePath]           })         },       })     });   }   handleComplete = async () => {     this.previewImg()   }   handleCancel = () => {     Taro.navigateBack()   }   /**    * 开发时，调试文本框与文字样式    */   handleDevInput = (e) => {     const value: string = e.target.value     const [x, y, w, h, fz, color] = value.split(',')     if (value.split(',').some(item => !item)) {       return     }     this.setState({       template: {         ...this.state.template,         textArea: { x: +x, y: +y, w: +w, h: +h },         textStyle: {           maxFontSize: +fz,           color         }       }     })     console.log(`设置文本框`);     console.log(JSON.stringify({       id: this.state.template._id,       ...this.state.template     }));     this.drawContent()   }   render() {     return (                           {!this.state.loading &&                        }                   {/* *点击完成后，长按图片分享给朋友哦！ */}         {           this.dev && this.state.template?.textArea && (               x,y,w,h,fz,color           )         }           完成           取消     )   } } export default MakeEdit 团队简介 为了获得T恤队，口号是：不忘初心

应用场景 灵感源于 [图片] 目标用户 情侣，夫妻 原型图 [图片] 架构图 [图片] 效果截图 主流程 [图片] 模块 模版 [图片] 我的 [图片] 项目演示视频 地址：https://v.qq.com/x/page/v3153g8zs5p.html 功能代码展示 云函数代码（卡券云函数） [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() if (event.action && ticketHelper[event.action]) { const result = await ticketHelper[event.action](wxContext, event) return result } return { message: 'This action was not found', error: -1, } } const db = cloud.database(); const ticketHelper = { // 添加卡券 async addTicket(context, params) { params.ticket._openid = context.OPENID let res = await db.collection('tickets').add({ data: params.ticket }) return res }, // 查看我的卡券 async queryMyTicket(context, params) { const { OPENID } = context let res = await db.collection('tickets').where({ _openid: OPENID }).orderBy('createdAt', 'desc').get() return res }, // 查看卡券详情 async queryCurrentTicket(context, params) { let res = await db.collection('tickets').doc(params.ticketId).get() return res }, // 删除卡券 async removeTicket(context, params) { let res = await db.collection('tickets').doc(params.ticketId).remove() return res }, } [代码] 页面代码（首页） [代码]<!--index.wxml--> <view class="container"> <view class="top-img"> <image class="top-img" src="../../images/top_img.png"></image> </view> <view class="ticket-list"> <view bindtap="toAdd" class="create"> + 添加自定义模版 </view> <view wx:for="{{myTemplates}}" class="custom" style="background-image: url({{item.backgroundurl}});" bindtap="toInfo" data-item="{{item}}"> <view class="custom-title" style="color:{{item.color}}">{{item.title}}</view> <view class="custom-info" style="color:{{item.color}}">{{item.info}}</view> </view> </view> <view class="ticket-list"> <view wx:for="{{templates}}" bindtap="toInfo" data-item="{{item}}" class="ticket-item {{index%2==0?'ticket-pink-bg':'ticket-blue-bg'}}"> <text class="ticket-title">{{item.title}}</text> <view class="ticket-info {{index%2==0?'ticket-pink-info':'ticket-blue-info'}} ">{{item.info}}</view> </view> </view> </view> [代码] 逻辑代码（首页） [代码] // 首页 const app = getApp() import { queryPrivateTemplate, queryPublicTemplate } from '../../api/template' Page({ data: { }, onLoad: function (opt) { // 领取路径跳转 if (opt.type == 1) { wx.navigateTo({ url: '/pages/giveList/giveList?ticket=' + opt.ticket, }) } // 查询公用的卡券模版 queryPublicTemplate().then(res => { this.setData({ templates: res.result.data, }) }); }, onShow() { // 查询私有的卡券模版 queryPrivateTemplate().then(res => { this.setData({ myTemplates: res.result.data, }) }); }, // 去添加模版 toAdd() { if (app.authorized !== true) { wx.navigateTo({ url: '/pages/authorize/authorize' }); return; } wx.navigateTo({ url: '/pages/selectBackground/selectBackground', }) }, // 查看详情 toInfo(res) { // 没有授权就先去授权 if (app.authorized !== true) { wx.navigateTo({ url: '/pages/authorize/authorize' }); return; } let item = res.currentTarget.dataset.item var templateInfo = JSON.stringify(item); wx.navigateTo({ url: '/pages/add/add?action=update&templateInfo=' + templateInfo }) } }) [代码] 样式代码（app.js） [代码].container{ width: 100vw; /* height: 100vh; */ background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; } page{ background: #f6f6f6; --color-p: #F58B98; } button { padding-left: 0rpx; padding-right: 0rpx; border-radius: 0rpx; } button::after { border: none; } /* 底部按钮 */ .next-btn { position: absolute; bottom: 0rpx; left: 0rpx; width: 750rpx; height: 120rpx; background: var(--color-p); text-align: center; line-height: 120rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 600; color: #FFFFFF; } /* 已使用样式 */ .image-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opacity:0.9; } /* 所有输入框，未输入文字的样式 */ .placeholder { font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #CCCCCC; } /* 卡券样式：主页、添加页、我收到的、我赠送的、详情页 */ .custom { width: 670rpx; height: 240rpx; margin-top: 25rpx; background: #FFF7F7; border-radius: 20rpx; background-size: 100% 100%; position: relative; } .custom-title { margin-left: 40rpx; padding-top: 40rpx; font-size: 40rpx; font-weight: 600; color: #FFFFFF; } .custom-info { margin-left: 40rpx; padding-top: 25rpx; font-size: 26rpx; font-weight: 600; color: #FFFFFF; } /* 头部样式：选择背景、添加页、详情页 */ .top { width: 690rpx; display: flex; flex-direction: row; margin: 20rpx 30rpx; align-items: center; justify-content: space-between } .top-title { font-size: 34rpx; font-family: PingFang SC; font-weight: 600; color: #2A2A2A; } .top-right-text { font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: var(--color-p); } [代码] 作品体验二维码 [图片] 团队简介 夫妻档 陈宇明：负责产品与开发 王丝雨：负责设计与交互 觉得不错那就【点赞】支持一下

1. 引言 背单词十分枯燥乏味，为了给广大英语学习者提供一个比较好的背英语模式和应用，魅力单词应运而生。 基于微信小程序，天然低门槛、易上手。 2. 应用场景 课间、地铁上、旅途中，任何碎片化时间。 3. 作品简介 魅力单词是一款面向学生的背单词小程序，提供了丰富的单词词库以及好玩的背单词模式。 4. 目标用户 初高中生、大学生，英语爱好者。 5. 实现思路 本小程序基于云开发，用到了云数据库存储数据，使用云函数获取词库列表，随机获取单词词条，图片列表。 按批次拉取数据缓存到内存及localStorage中，实时对比输入内容与当前单词，基于图片奖励，继续循环下个单词。 图片数据：来源于微博。 单词词库：来源于百词斩。 6.流程图 [图片] 7. 效果图 [图片] [图片] [图片] [图片] 8. 功能代码展示 云函数 [图片] 数据库 [图片] 页面源码 [图片] [图片] 9. 作品二维码 [图片] 作品代码仓库地址：请私信 10. 团队简介 团队名称：未央队 团队成员：曹禄丰

「红小包抽奖」是一款模拟微信红包的数字抽奖小程序，无需花钱，可绑定多个微信群，可切换排序：手气最佳、手气最差、手速最快。 [图片]　　[图片] 说一下应用场景。 如果你有加入一些商家群，那应该经常会看到商家在群里发红包，然后说手气最佳送一个啥啥啥，也有商家会挑手气最差的。 这里有几个小问题。 如果要找手气最差的，不太好找，尤其人多的时候。如果要找手气最佳前几名，或者手气最差后几名，也都不太好找，因为不可以切换排序。如果我想一个红包让多个群的人一起来抢，好像也还没办法实现。「红小包抽奖」解决了以上问题，可以切换排序方式，可以绑定多个群。 当然也可以不绑定群，比如你是写公众号的，那就不用绑定群，公开，所有人都可以来抢。 还有一点很重要，就是不需要真的往红包里塞钱。这其实就是一个模拟微信红包的数字游戏。因为很多人玩微信红包抽奖，关键点还是在“抽奖”，而不是“红包”，金额也不会太大。不过在这款小程序里，没人可以拦住你的任性，发一个亿太简单。 以下是小程序的功能介绍视频。 [视频] 特别感谢 Neo 老师给了我灵感，才有了这款小程序。Neo 是我的用户，给了我很多建议和帮助。之前做的一个“翻牌抽奖”的小程序，他使用时遇到一个 bug，我们聊的时候，Neo 说，其实直接用微信红包在群里抽奖，感觉效果也还不错。他这句听似不经意的话，刹那间给了我灵感，几天之后就开始付诸行动，花了三周时间，有了现在这款「红小包抽奖」，再次感谢 Neo！ 这款小程序已经发布，不过版本是 1.0.0。后面改了几个 bug，作了一些优化，但是没有通过审核，原因是红包类目下架了，可能在作规则修改，也不知道哪天会再次开放。如果不再开放红包类目，那这个 v1.0.0 估计是绝版了。 祝你玩得开心！ [图片]

功能简介： 对微信群文件（图片、文档、视频等）进行存储、整理、展示 应用场景： 1、学校班级群，老师留的作业和教学资料，家长可以第一时间保留下来，方便日后查看 2、家庭群，不同家庭成员分享的照片可以集中保存，形成专辑分享给群里其他成员查看 3、办公群，常用的资料可以保存下来，作为后续工作中使用 目标用户： 对微信群文件有存储整理需求的用户 实现思路： 通过获取群文件API获取群文件，进而对群文件进行进一步的整理储存 产品架构图： [图片] 产品截图： [图片][图片][图片] 体验二维码： [图片] 团队介绍： 国内最早一批从事小程序开发的开发团队，为腾讯音乐、故宫、军武次位面、星球研究所等众多公司和公众号进行过小程序开发，目前主要以自研项目为工作室重点。

应用场景： 实现线下绘本馆线上线下一体化，将常规绘本馆的会员体系、仓储管理线上化，同时增加线上借阅服务及社区能力，实现绘本馆的线上线下一体化服务，为绘本馆打造借阅一站式服务解决方案。 目标用户： 8岁以下儿童及家庭 架构图： [图片] 效果截图： [图片] [图片] [图片] [图片] 作品体验二维码： [图片] 作品演示链接： https://v.qq.com/x/page/p3151qepm0w.html 团队简介： 宝宝约玩（深圳）科技有限公司，致力于为成为每个家庭身边的亲子生活管家。以线下绘本馆为基点，以亲子阅读、亲子活动、约玩等业务为基础向外延伸，为家长和孩子创造更多更美好的亲子时光。 目前已上线项目：线上绘本租赁平台-“爱租喵”，本地服务租赁平台-“宝宝约玩绘本馆”

2020小程序云开发挑战赛参赛作品 项目名称苦海匿舟-心情宣泄小程序 项目介绍“苦海匿舟”是一个不需要显示真实身份，可以发表心情的小程序。没有名字，没有身份，没有任何现实生活的信息。在这里，只要你不愿意透露，谁都无法知道你是谁。 苦海，指人生中的各种不如意，痛苦的事情。佛教也曾说苦海无边。匿舟，是指在这无边苦海当中，也可以寻得一些光明。在这平台上互相鼓励。 苦海匿舟的宗旨是给予人们一个心灵放松的港湾，严格审查发布内容，不能发布时政信息，不能发布遥言，不能发布有损害别人或者国家的言论。务求平台内容清洁，正能量。 目标用户所有大于18岁的人群，只要你存在压力需要宣泄，需要倾诉，都可以来苦海找到小舟渡过彼岸。 实现思路本小程序采用基于云开发的原生开发，用到了云数据库存储数据，使用云函数获取当前用户的openid、读写操作云数据库，云存储保存图片，云调用内容安全接口检查提交信息是否存在违法违规内容。 主要用到了以下几个云函数： 1、用户登录获取openid，性别 2、更新云数据库，基本上使用了云函数来更新云数据库 3、多表联查，在话题评论部分，云开发的数据设计与传统的区别较大，这里使用比较新的方式检测用户是否评论话题，这部分功能使用了云函数来实现 4、使用云调用内容安全接口检查提交信息是否存在违法违规内容 [图片] 系统流程与功能[图片] 项目现状与未来计划[图片] 效果截图[图片] [图片] [图片] [图片] [图片] [图片] 部署教程克隆代码到本地在微信开发者工具中导入项目，并设置使用自己的appid将cloudfunctions目录中的云函数上传部署到云端打开云开发控制台，点击“数据库”创建以下集合：biyoudata、huati、huaticomment、shiguangping、systemnotices、userInfo、wenzhangbiao、xinjian由于本项目全部使用云函数开发，并没有后端后台，所以，在项目上的一些UI元素需要自行更改链接，让项目显示正常由于本项目不会获取用户任何其它信息，系统只会在用户授权的时候获取用户性别，其它信息一律不保存,授权信息代码可以在码云查看，所以用户头像信息只会是固定的男或者女。开始使用代码链接码云：https://gitee.com/Haydencheung/sweetsandbitters_publish 作品线上二维码（已上线）[图片] 作品体验二维码[图片] 功能演示腾讯视频：https://v.qq.com/x/page/d3151bqxeda.html 产品商业价值这一部分内容有三部分主要内容，项目力求做一个专属的小程序，接外部资源产生价值（非广告，或者以不影响用户体验的情况下接入广告）。需要更深入了解，可以在参赛资料找到我的联系方式。感谢！ 团队简介魔幻小程序队伍只有一个人，即本项目作者，作者曾经只是一个产品经理，从事互联网行业已有10多年。一直希望可以拥有自己的项目，自己的产品，小程序云开发带来了这种希望。从一个基本不会写代码的产品，到现在可以搭建起一个完整的项目，由微信的云开发带来的曙光，让我可以不需要学习过于复杂繁琐的后端语言就可以搭建出完整项目。 衷心感谢微信团队，小程序团队等等开发【云开发】这个项目。 开源许可证标注GPL-3.0 

应用场景 很多人对孤单，孤独，寂寞 有很多不同的理解。谈谈我的想法，陪伴不一定是异性，不一定是肉体。 我想的是一种短暂性的社交，只此一面，可能以后再无相见。所以放开的来，他/她 对你的圈子没有影响。（如果聊的来可以互留微信）；想了想感觉确实与评论区的 YP 不谋而和呀（秘密，两人，孤单），首先是肯定要避免这种事件的出现，这不符合我的想法。 还有就是你的诉求不一定要求是一个人，也可以是5人，刚好凑个五黑阵容。😳 我的这个想法是以线下为核心开展的，但是有非常多的不确定性因素。最关键的是 如何知道 他/她 是不是一个好人。 现在可玩的东西这么多，孤独的状态我认为是短暂性的，不是一个长久状态。你经历了某件事，发生了一些事情，或者要去做某些事，让你感到了孤独，你才有这个需求。 （以下全是我的内心独白） 场景1：生病的状态，内心特别的脆弱的。 去医院没什么，难的是去一个人去医院。东奔西跑的心里面难受极了。 场景2: 玩游戏老是一个人，自己是渴望交流的。玩守望，最喜欢和话多的一起玩。 目标用户 那些感到孤独的人，是精神上的孤独，不是肉体上的寂寞。不要老说什么YP，我懂😨。首先本产品是不上线的，虽然我很想上线，但是实现不了😭。 基本思路 用户通过发帖，表达自己的诉求，比如：周末来一个人一起打篮球🐓。 其他用户看到了，点击沟通 双方就可以沟通了，约会时间地点 一起打篮球。 动态是一个副产品，就像发一个朋友圈 QQ空间的说说一样，表达自己日常的看法，有趣的图片，雷人的事件… 架构图(系统分析) 思维导图地址： 幕布 [图片] 效果截图 [图片] 演示视频 https://v.qq.com/x/page/g3151ub314r.html 代码链接 码云 很遗憾不能上线，但是通过开源结识了一些人，意外的惊喜了😊，欢迎各位 start。 团队简介 汇溪和他们的小伙伴们 一个人，一个人监督自己，太难了。堕落太容易了，打游戏这么舒服，我为什么要压抑住自己。学一堆让人迷惑不解的东西呢！我不想自己到而立之年是，回头望去，一点值得回味的东西都没有。在亲人面前，没有满脸得意向他们展示的东西。想想这些就可怕，我还年轻，我有的选择，我很庆幸。 我想成立一个团队，汇溪。我想让他有点影响力，这样对所有成员都有好处。团队间相互督促，相互学习。一个好的学习氛围有多重要，不用多讲都知道。学习群之类的没用，必须小而精。现在它没有丝毫影响力，可能将来也没有。

经过一个多月的大赛报名与初赛筛选，2020小程序云开发挑战赛复赛作品名单终于新鲜出炉啦！共有来自两个赛道的近400个作品通过作品大众投票及专家评委层层筛选这两个阶段，最终校园赛道10个作品，职业赛道10个作品强势入围挑战赛复赛。 在此次比赛中，不少队伍表现的颇为出色，专家评委们从产品定位、产品技术、部署执行、产品体验、过程表现等五个维度进行综合打分，评选出两个赛道极具代表性的优秀作品，并结合大众投票结果评选出晋级复赛作品，现予以公示。 一、复赛作品名单公示 校园赛道进入复赛作品名单 [图片] 职业赛道进入复赛作品名单 [图片] 以上作品均按作品编号排序 以上两个赛道的入选作品在整个国庆假期期间予以公示（10月1日-10月8日），如果对作品有异议，可通过大赛邮箱CloudBase@tencent.com详细说明举报或申诉（其他方式无效），公示期结束后，专家评判委员会将根据举报内容核定作品，并作出入选调整，在10月10日左右更正发文。 最终确定的作品，将在10月19日参与复赛路演，决出10个到深圳腾讯滨海大厦参与线下决赛并接受专家指导的机会！ 届时我们将对复赛进行全程直播，欢迎大家关注公众号「微信开发者」和「腾讯云云开发」的直播预约推文获取直播地址。 二、有效作品名单公示 专家评判委员会经过3轮独立判定，最终复核审定；对所有提交作品进行有效评定，确认如下有效作品名单。 [图片] [图片] 以上作品均按作品编号排序 请名单中有效作品的作者尽快点击下方链接登记信息，便于奖励发放（队中每位队员都须填写）。截止日期：10月10日，逾期将视为放弃奖励。 登记链接：https://wj.qq.com/s2/7304671/265a/ 有效作品在整个国庆假期期间予以公示（10月1日-10月8日），如果对作品有效性存疑，或对名单中作品有效性有异议，可通过大赛邮箱CloudBase@tencent.com详细说明举报或申诉（其他方式无效），公示期结束后，专家评判委员会将根据举报内容核定作品，并作出调整，在10月10日左右更正发文。 三、评审规则公式 作品评分过程分为两个部分，公投分数和专家分数，具体如下： 公投分数占比20%，分赛道根据9月25日24:00的文章点赞数进行计分，计分公式= 100 -[ (点赞数排名-1）/该赛道全部参与作品 * 100]；如果遇到相同点赞数，则平行排名。专家分数占比80%，分赛道进行评判，专家团分多组按照官方标准作品分数尺度进行评判，每个专家组的前5名作品，进入最终复核池。专家团分技术和产品两大维度专家，独立单独为复核池内所有作品进行打分，最终汇总平均分。作品按照，专家评分（80%）+公投（20%）= 初赛总分，进行汇合，分别得出赛道的复核池排名名单； 同时，赛事组委会收到投诉作品，对已经进入复核池的投诉作品进行再次审定，结合专家评委团讨论最终意见，给予一定程度的扣分。 参赛作品中，有过往比赛作品重复参赛，或被认定在比赛前产出的，若作品存在50%的改造（包含传统后端改为云开发后端）则判定是有效作品，如果不是则直接无效淘汰；但作品由于争议和公平性原因，不能继续进入下一阶段比赛。 有效作品评判规则根据比赛作品要求进行，作品要求为：使用云开发构建具有应用场景和功能的微信小程序或公众号H5应用，作品须综合运用云开发的云函数、云数据库、云调用、静态资源托管能力，赛事作品允许云开发+服务器的进行混合开发，但后端核心服务需基于云开发构建。 对有如下任何一种情况的作品，均判定无效： 代码使用框架编译的代码，非原编程代码提交的代码中和实际展示功能不符合的代码使用大量官方示例，且占比80%以上的代码中使用空文件糊弄提交的代码中云开发使用极度混乱，不能有效运行的作品中无使用云开发技术的代码地址访问404、无效的其他评委认定的不符合要求的情况 四、优秀作品的评选 优秀作品奖项，将在比赛决赛后一同公布。优秀作品基于有效作品名单中的作品，在产品性、功能性、影响力、文档完善度、标杆效应多方面考虑评选。优秀作品意在激励参赛者打造优质作品，合理有效的使用微信生态和云开发技术，不受大赛的作品时效约束。

自助心理成长 小程序简介 同健身一样，我们认为心理成长是终身的。然而也同样地，健身私教与心理咨询都非常昂贵，不可能终身持续购买。 积极心理学之父马丁塞里格曼说，”根据世界卫生组织的报告，抑郁症是世界上花费最高的疾病。通常治疗方法就是药物与心理疗法。在美国，每年都有约一千万个这样的病例。平均而言，一例抑郁症每年要花约5000美元的治疗费。抗抑郁药产业已经成为一个价值数百亿美元的产业。请想象一下：有一个便宜得不可思议的疗法——在网上布置积极心理学练习，可以大规模实施，而且它至少跟常用疗法和药物一样有效。“ 这便是这个小程序想要做的事情。 当情况没有严重到影响正常生活时，我们会通过坚持锻炼保持身体健康，通过学习心理学知识+觉察+心理学知识应用保持心理健康——最终达到人生幸福美满。 让我们一起，靠自己的力量，觉察自己的内心，应用心理学知识，使我们此刻更心安，未来更幸福。 目标用户 关注自己心理健康、且有主动改善意愿的非专业人士。 应用场景 1.近期情绪不佳、状态不好时，通过心理学测试深入了解自身状态，通过练习改善当前心理状态。 2.长期坚持，改善个人整体生活状态。保持心理健康是终生事业。 实现思路 1.测试了解自身心理状态，保持记录，以及进行时间线上的对比（TODO），觉察自己的变化。 2.通过练习改善心理状态。 3.根据当前情绪推荐测试及练习。 4.积极情绪词池：更多的关注开心的时候、美好的事物会使人对生活更满意。 5.后续继续各种实验，以及心理学实践加入。 特点 使用 openapi 进行 UGC 内容审查。 词云图——待优化得更漂亮。（TODO) 效果截图 产品没有发布，审核问题。这里牵出一个很有争议性的问题：非经营ICP备案，是需要对域名备案的。我使用云开发的产品，是没有域名的，连IP都没有。你要我拿什么去备案？ 看社区有人问了同样的问题，并没有什么建设性解决方案，我决定只好先随便整个域名备案一下吧。 https://developers.weixin.qq.com/community/develop/doc/000a62dd194850aeb69933ae65b400 小程序还在审核中，官方表示体验版也可参赛，那就看看截图吧 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 技术实现 云开发==Nodejs+MongoDB+Server，最后呈现给开发者的都是function——云函数，所以技术实现上毫无深度可讲，我就讲下在没有产品和设计师的前提下，如何简单有效将自己的想法开发出来。 1. 选一个喜欢且实用的UI框架 先不说没有设计师的产品该有多丑，对于一个前端开发而言，没有设计稿的开发，也是无从下手啊…… 我开发过4个小程序，分别用了WeUI（微信官方UI）、Vant Weapp（有赞）、Taro UI（京东）、以及现在用的ColorUI。也试用了所有能搜出来的UI框架，总结下来： 第一点，大部分的小程序UI框架都适用于商城，以商城为中心创建的。所以组件很全，但是由于商城需要展示的东西特别多，因而组件都特别小，非常不大方。而且商城的特色是要推广产品，吸引注意力，因而设计上都浓浓的卖货气息，很有压迫感。比如Taro和Vant Weapp。 而我是喜欢Material UI那一挂的，简洁大方、让人感觉舒适轻松（做一个安静的美侣纸）。但是Material UI主要是针对PC端，以及Android移动端。那套UI用在IOS上就特别奇怪，一眼能看出是Android的应用…… 以及，我并没有找到可用的MaterialUI风格的小程序UI框架。 而WeUI，用起来很方便，但，真的很难谈得上好看。其实也不丑也能用，奈何现在的应用都太好看，衬托得实在是不能看。 第二点，我不需要多端适配，想简单点，不想处理兼容问题，希望用纯微信小程序语言编写，不用写React或者Vue代码再进行一道编译生成微信小程序的代码。 最后选择了ColorUI，缺点是组件太少，毕竟是个人开发者，优点是满足以上两点。目前用下来还行，但没达到理想状态，理想状态可能是用antdesign和material-ui的爽。 2. 客户端先行，直接开始画UI 先做功能页，对我的产品而言是「练习」和「测试」。因为你有一个想法，它要实现什么功能，功能是很明确的。而其他如首页、用户页等，都是可以有创造性的设计，有无限种可能。 这两个功能页很简单——万物都是CRUD。列表、表单提交、详情、Reference。但也是耗时最久的，都花在针对这两个功能的文案整理上，将四本心理学的书反反复复的阅读->Copy->整理->Paste，看到我都要吐了。没办法，项目特色导致的，之前做的小程序就没有这个问题。 然后做用户页，用户能拥有的，也只能是产品功能。想到一个方案，开始实施，如果后续有更好的方案再作修改，也只是改改UI。 最后做首页，首页我做了三版。最后那一版也不满意，后续有更好的方案再作修改吧。首页是设计上有最多可能性的页面。也是用户第一眼看到的页面，注定设计开发艰难。。。 3. 客户端接口确定 功能页UI完成之日，就是客户端接口明确之时。列出客户端所需接口，这时服务端可以开始介入开发了。如果是独自开发，也是这样的流程，我之前一个人干时就是这样的流程。因为UI如果没确定，接口很有可能修改，所以在UI达到满意状态的时候，开始写接口，后面再微调UI。 当然后期万一真要大改，那也没办法，在公司上班这种事不也常有，不可避免。 用户页UI确定，新增一批接口。 4. 服务端 Collection创建 + 云函数开发 + 自测 在3中已经说明，两个时机服务端开始开发：1）功能页UI完成；2）用户页UI完成。 关于自测……L偷懒也略过了。好吧，直接联调吧 5. 客户端、服务端联调 由于L用TS写的云函数，有interface，客户端加入调接口的代码还是很easy的，不用翻代码。然后两人坐在一起联调也很快，可能他代码结构写的好吧 6. UI微调、Bugfix 这是持续不断的事情。（但其实我初期完成后发现由于审核问题不能发布，心凉了半截，再也没看过这个小程序。直到20号提交截止日，再改了一版主页……） 7. 文档、视频 随便做做……因为我的目的不是得奖，且这个比赛很明显只是为了推广微信云开发。我是自己想做这样一个小程序，有个比赛会督促我更快更好地完成。正如我虽然热爱跑步，但是如果不报个比赛，我可能永远停留在5K，还一个月就跑那么一次。报个半马你就知道至少要在比赛日子之前，保持跑步频率，至少跑一次15K，多次10K。并不是为了比赛得奖（那也太不可能了），只是为了完赛。 团队简介 我们都是前端开发，一位（L）负责云开发模块，一位（我）负责产品设计+UI实现。

Hi头像 让头像有趣一点 核心亮点 特性 介绍 云开发 基于腾讯云云开发，易部署、扩展性很好 人工智能 基于腾讯云的人脸五官分析服务自动为头像戴皇冠、圣诞帽或口罩，支持多人识别 多端运行 基于 Taro 打造，有微信小程序端和 Web 端 用户体验好 UI设计精美，易于操作，交互动画友好且动感 部署文档详细 本项目的部署文档非常详细，详情请查看《DEPLOYMENT》文档 前端工程化 核心配置已抽取，基于 Cloudbase Framework 完成云函数、Web 端 和小程序端部署 技术小册 独家拥有技术小册《从0到1开发一个智能头像识别小程序》，详细说明 Hi 头像主要实现思路 功能体验 小程序二维码 [图片] Web 体验版：https://face.xiaoxili.com 愿景 使用场景&目标用户&背景 在节日的时候，我们可以使用符合节日七夕的头像，比如在国庆节使用含国旗的头像表达对祖国的祝福；在圣诞节的时候，我们能给亲朋送一个带圣诞帽的头像传递快乐。 需求分析 在一些特定节日里，很多人尤其是年轻人喜欢新潮的头像，比如近几年的圣诞节，会有“@官方微信，送我一顶圣诞帽“的需求，对此，我们做这个小程序，来解决特定时候头像的制作。 设计理念 标语：让头像有趣一点 「Hi头像」结合节日特点，微信头像进行智能化处理，让头像更加符合节日氛围。 1、紧跟节日热点 国庆节头戴国旗、圣诞节智能戴帽子，增加节日乐趣 2、简单易操作 不同于各类app的繁琐，小程序更简洁易操作 3、乐于分享 借助微信社交机制，头像处理后可以分享给好友或分享到朋友圈，展示头像成果 用户画像 20-35喜欢分享的年轻人 作品效果图 [图片] 产品展示视频 #小程序云开发挑战赛# Hi头像小程序介绍视频-完整版 主创人员 小溪里，技术研发 个人网站：https://www.xiaoxili.com 公众号：小溪里 不二雪，UI设计 公众号：不二诗旅 部署文档 本项目的部署文档非常详细，详情请查看《DEPLOYMENT》文档。 RoadMap 🚀 表示已经实现的功能，👷 表示进行中的功能，⏳ 表示规划中的功能，🏹 表示技术方案设计中的功能。 功能 状态 发布版本 UI 重构、页面流程优化 🚀 已实现 V2.0 云函数合并，使用 [代码]tcb-router[代码] 进行路由匹配 🚀 已实现 V2.0 使用 [代码]cloudbase-framework[代码] 来发布 Web 端、云函数 🚀 已实现 V2.0 使用 [代码]cloudbase-framework[代码] 来部署小程序的预览、体验版 👷 进行中 V2.0 Cloudbase CMS v1 版数据模型快速生成集合字段 🚀 已实现 V2.0 Cloudbase CMS v2 版数据模型快速生成集合字段及提供默认数据 ⏳ 规划中 V3.0 贴纸编辑器调研 🏹 设计中 V3.0 海报换为 [代码]canvas 2d[代码] 版 🏹 设计中 V3.0 Web 版云开发登录鉴权设计 🏹 设计中 V3.0 云环境共享调研 🏹 设计中 V3.0 更多的腾讯云人工智能服务 🏹 设计中 V3.0 学习资源 《从0到1开发一个智能头像识别小程序》 本技术小册基于Hi 头像 v1版本编写，v2 版本正在撰写中。 从产品功能规划、技术选型到实战开发，全方位介绍基于小程序云开发来实现智能人像识别小程序，不仅能完成跨端开发，更能学习到当今炙手可热的 ServerLess 开发实战（即小程序与 Web 云开发），更能将高深的人工智能技术落地到真实项目中，甚至，我们还将探索如何将小程序与Web端完成前端工程化实践。 你会学到什么？ 小程序云开发配置与开发技巧，亲历云开发的实战场景 基于 tcb-router 封装多功能的 API 服务 基于静态网站托管部署 Web 版 基于 CMS 内容管理系统来统一管理数据 基于 Cloudbase-Framework 来部署云函数、小程序和 Web 端 体验及实战腾讯云人工智能特色功能，如人脸识别、五官分析、人像转换等 Taro 跨端使用技巧，在实战中了解Canvas在小程序与web端的差异，以及图片裁剪、压缩、上传的各种技术细节 产品需求、项目规划的实战知识 项目综述 本项目在小程序和Web端使用 Taro 构建，功能服务基于腾讯云云开发及腾讯云人工智能服务，使用 CMS 内容管理系统来管理数据，基于Cloudbase Framework完成小程序端、Web端、云函数端构建。 整体关系图 [图片] 页面间调用关系图 在[代码]taro/src[代码]中，有以下文件 [代码]|-config.js 配置AppId、云环境Id及其它 |-components 全局组件 |-pages |-|- avatar-edit 头像编辑页 |-|- avatar-poster 头像分享页 |-|- theme-list 主题列表 |-|- self 我的，含个人头像列表 [代码] [图片] 头像编辑页流程图 头像编辑是Hi 头像的主逻辑，下面这个流程图充分展示了从加载主题数据、到头像编辑、再到头像生成的完整流程。 Hi 头像功能以小程序端为主，功能齐全，而在 web端能制作头像并保存图片，暂不提供头像保存和分享功能。 [图片] 五官分析时序图 v1版中使用图示“第五版”时序图来完成主逻辑，而v2版中使用“第六版”时序图，这两者差异点就是基于已有服务来完成功能，更容易初学者掌握。 [图片] 核心语法 1、云函数[代码]hiface-api[代码]基于[代码]tcb-router[代码]做路由跳转 主要功能有头像、主题、用户信息的获取与更新，还有创建小程序码的功能。 路径为[代码]cloud/functions/hiface-api[代码] 2、核心算法 基于五官分析为多个人脸戴上贴纸，具体可以查看《通过五官分析实现为人脸佩戴贴纸》

0x00.应用场景 比赛之初的原意是想做一个 HomeAssistant 的小程序版本，因为 HomeAssistant 官方只有 APP 和网页版，但是限于社畜 996 过忙无法实现全部功能，因此并未基于 HomeAssistant 入手，较为遗憾……而是从 IOT 物联网开发平台直接拉取原始数据。 通过微信小程序查看家中传感器数据并控制各种开关 0x01.目标用户 自己就是最合适的目标用户了，物联网远程控制相关 0x02.实现思路 1.下传数据： 小程序本地调用云函数得到传感器相关数据，微信小程序云开发 - 云函数去 IOT 物联网开发平台拉取数据（之所以使用云函数而不是在本地 js 进行请求的其中一个原因是 AK/SK 不能存在客户端，还记得那句话吗“不要相信来自客户端的任何请求”？） 2.上传控制： 小程序本地调用云函数，云函数发送控制指令至 IOT 物联网开发平台，IOT 物联网开发平台发送控制指令至被控制端 0x03.架构图 [图片] 0x04.效果截图 [图片] 0x05.代码链接 https://github.com/yuangezhizao/HomeAssistant 0x06.作品体验二维码（如已上线） 注：体验版本供审核 [图片] 0x07.团队/作者简介 远哥制造

微信开发者工具，新建项目中选择云开发，即获得云开发模板： [图片]初めまして、どうぞ宜しくお愿いします（初次见面，多多关照~） [图片] 1. 点击获取Openid 获取用户Openid：授权用户信息，纯客户端微信生态能力 参考文档 button open-type：https://developers.weixin.qq.com/miniprogram/dev/component/button.html wx.authorize：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html 另，进入即显示用户头像，无需授权可获得当前用户部分信息，也是这个模块想要体现的微信小程序能力。同样是客户端能力，与云开发无关 参考文档 open-data：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 2.上传图片 选择图片：客户端功能 参考文档 wx.chooseImage：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 上传图片：云开发功能云开发提供的文件存储 参考文档 云存储：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html#%E5%AD%98%E5%82%A8 wx.cloud.uploadFile：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html 3.前端操作数据库 云开发数据库分前端操作和云端操作，方法类似。此示例为前端操作 创建增删改查参考文档 云开发数据库：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 4.即时通信Demo 数据库实时数据推送能力：监听数据库数据变化 参考文档 实时数据推送：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/realtime.html 此示例还有很多细节，值得细细研究。 包括有对设备安全区域的判断作样式调整、向上滚动数据拉取、向下滚动到底部、全屏预览图片wx.previewImage等 5.快速新建云函数 云函数功能 参考文档 云函数：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E4%BA%91%E5%87%BD%E6%95%B0 剪贴板功能：纯客户端功能 wx.setClipboardData：https://developers.weixin.qq.com/miniprogram/dev/api/device/clipboard/wx.setClipboardData.html 6.云调用 云调用文档 6.1 服务端调用发送订阅消息：cloud.openapi.subscribeMessage.send获取永久有效小程序码：cloud.openapi.wxacode.get服务端接口列表：https://developers.weixin.qq.com/miniprogram/dev/api-backend/，带云调用标签即云开发可用 示例中还有，调起客户端小程序订阅消息界面 wx.requestSubscribeMessage：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html 6.2 开放数据调用客户端和云端调用开放数据，其中敏感信息只能通过云端获取 云开发在获取敏感数据时，省去鉴权和加解密步骤 客户端，两个示例 werun：wx.getWeRunData微信运动具体信息都是敏感信息userInfo：button open-type=getUserInfo即可openId等是敏感信息云端，werun和userInfo是同样的方式： 直接callFunction，参数带上客户端获取到的cloudID即可cloud.getOpenData，参数中有客户端获取到的cloudID参考文档 服务端获取开放数据：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html Cloud.getOpenData：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/Cloud.getOpenData.html 6.3 消息推送需要云开发控制台和云开发代码下config.json中配置后使用，即将微信提供的客服消息，替换为云函数处理，且不能共存。后台设置了客服，云函数无法接收到用户发送的消息。如图 [图片] 参考文档 云函数处理消息：https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html#option-cloud

使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基本用法 基础用法 [代码]<!--web开发中顶层变量的key名是:root，小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .two { color: white; background-color: black; margin: 10px; } .three { color: white; background-color: var(--main-bg-color); } [代码] 提升用法 [代码]<div class="one"> <div class="two"> <div class="three"> </div> <div class="four"> </div> <div> </div> [代码] [代码].two { --test: 10px; } .three { --test: 2em; } [代码] 在这个例子中，[代码]var(--test)[代码]的结果是： class=“two” 对应的节点: 10px class=“three” 对应的节点: element: 2em class=“four” 对应的节点: 10px (继承自父级.two) class=“one” 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值 上述是一些基本概念，大致说明css变量的使用方法，注意在web开发中，我们使用[代码]:root[代码]来设置顶层变量，更多详细说明参考MDN的 文档 妙用css变量 开发中经常遇到的问题是，css的数据是写死的，不能够和js变量直通，即有些数据使用动态变化的，但css用不了。对了，可以使用css变量试试呀 wxml js [代码]// 在js中设置css变量 let myStyle = ` --bg-color:red; --border-radius:50%; --wid:200px; --hgt:200px; ` let chageStyle = ` --bg-color:red; --border-radius:50%; --wid:300px; --hgt:300px; ` Page({ data: { viewData: { style: myStyle } }, onLoad(){ setTimeout(() => { this.setData({'viewData.style': chageStyle}) }, 2000); } }) [代码] wxml [代码]<!--将css变量(js中设置的那些)赋值给style--> <view class="container"> <view class="my-view" style="{{viewData.style}}"> <image src="/images/abc.png" mode="widthFix"/> </view> </view> [代码] wxss [代码]/* 使用var */ .my-view{ width: var(--wid); height: var(--hgt); border-radius: var(--border-radius); padding: 10px; box-sizing: border-box; background-color: var(--bg-color); transition: all 0.3s ease-in; } .my-view image{ width: 100%; height: 100%; border-radius: var(--border-radius); } [代码] 通过css变量就可以动态设置css的属性值 代码片段 https://developers.weixin.qq.com/s/aWfUGCmG7Efe github 小程序演示 [图片]

真机测试已通过。你照抄就行，保证可通过。 最新完美版本可供参考： https://developers.weixin.qq.com/community/develop/article/doc/0004c4a50a03107eaa79f03cc56c13 小程序端： wx.cloud.callFunction({     name: 'getPay' ,     data: {         total_fee: parseFloat(0.01).toFixed(2) * 100,         attach: 'anything',         body: 'whatever'     } }) .then( res => {     wx.requestPayment({         appId: res.result.appid,         timeStamp: res.result.timeStamp,         nonceStr: res.result.nonce_str,         package: 'prepay_id=' + res.result.prepay_id,         signType: 'MD5',         paySign: res.result.paySign,         success: res => {             console.log(res)         }     }) }) 云函数：getPay getPay目录下共两个文件： 1､index.js 2､package.json index.js代码如下： const key = "YOURKEY1234YOURKEY1234YOURKEY123"//这是商户的key，不是小程序的密钥，32位。 const mch_id = "1413090000" //你的商户号 //将以上的两个参数换成你的，然后以下可以不用改一个字照抄 const rp = require('request-promise') const crypto = require('crypto') function paysign({ ...args }) {     let sa = []     for (let k in args) sa.push( k + '=' + args[k])     sa.push( 'key=' + key)     return crypto.createHash('md5').update(sa.join('&'), 'utf8').digest('hex').toUpperCase() } exports.main = async (event, context) => {     const appid = event.userInfo.appId     const openid = event.userInfo.openId     const attach = event.attach     const body = event.body     const total_fee = event.total_fee     const notify_url = "https://whatever.com/notify"     const spbill_create_ip = "118.89.40.200"     const nonce_str = Math.random().toString(36).substr(2, 15)     const timeStamp = parseInt(Date.now() / 1000) + ''     const out_trade_no = "otn" + nonce_str + timeStamp          let formData = "<xml>"     formData += "<appid>" + appid + "</appid>"     formData += "<attach>" + attach + "</attach>"     formData += "<body>" + body + "</body>"     formData += "<mch_id>" + mch_id + "</mch_id>"     formData += "<nonce_str>" + nonce_str + "</nonce_str>"     formData += "<notify_url>" + notify_url + "</notify_url>"     formData += "<openid>" + openid + "</openid>"     formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>"     formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>"     formData += "<total_fee>" + total_fee + "</total_fee>"     formData += "<trade_type>JSAPI</trade_type>"     formData += "<sign>" + paysign({ appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type: 'JSAPI' }) + "</sign>"     formData += "</xml>"          let res = await rp({ url: "https://api.mch.weixin.qq.com/pay/unifiedorder", method: 'POST',body: formData})     let xml = res.toString("utf-8")     if (xml.indexOf('prepay_id')<0) return xml     let prepay_id = xml.split("<prepay_id>")[1].split("</prepay_id>")[0].split('[')[2].split(']')[0]     let paySign = paysign({ appId: appid, nonceStr: nonce_str, package: ('prepay_id=' + prepay_id), signType: 'MD5', timeStamp: timeStamp })     return { appid, nonce_str, timeStamp, prepay_id, paySign }  } package.json 代码如下： {     "name": "getPay",     "version": "1.0.0",     "description": "",     "main": "index.js",     "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"     },     "author": "youself",     "license": "ISC",     "dependencies": {         "crypto": "^1.0.1",         "request-promise": "^4.2.2"     } } 最后选择：上传和部署：云端安装依赖。