gh_7f2dbf8b42d7_258.jpg
一、参考文档:
- 小程序 - 框架：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
- 小程序 - 组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
- 小程序 - API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/
- 小程序 - 开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 腾讯IM：https://cloud.tencent.com/document/product/269/36838
- 腾讯直播：https://cloud.tencent.com/document/product/454/7873
- 直播优化视频卡顿：https://cloud.tencent.com/document/product/454/7946
- 有赞UI组件库：https://youzan.github.io/vant-weapp/#/intr
- WeUI组件库：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html
- 小程序避坑指南：https://cloud.tencent.com/developer/article/1367130
二、开发环境
-
开发工具：VSCode、微信开发者工具
-
开发环境：macOS、windows
-
开发语言：JavaScript、CSS、WXML、WXS等
-
基础库最低版本：2.5.0
-
源码地址：http://git.showjoy.net/wechat-mini/wechat-talent-shop-live
-
其他：
- 使用
<live-player>组件，需要相关资质，小程序后台开启实时播放音视频流或实时录制音视频流，仅支持真机环境运行。 - 小程序后台，需要配置服务器域名（request、socket、uploadFile、downloadFile、udp）、业务域名（开启网页）、消息推送等，才可以使用相关功能和业务开发。
- 使用
三、项目架构
.
├── app.js
├── app.json
├── app.wxss
├── package-lock.json
├── package.json
├── project.config.json
├── sitemap.json
├── pages (主目录)
│ ├── home (页面)
│ │ ├── home.js
│ │ ├── home.json
│ │ ├── home.wxml
│ │ └── home.wxss
│ ├── wxs (WXS模块)
│ │ ├── array.wxs
│ │ ├── bem.wxs
│ │ └── ...
│ └── ...
├── miniprogram_npm (NPM构建目录)
│ ├── tim-wx-sdk
│ ├── weui-miniprogram
│ └── ...
├── components (公共组件)
│ ├── countdown
│ └── ...
├── resources (公共资源)
│ ├── cart
│ │ ├── normal.png
│ │ └── ...
│ └── user
│ ├── option0.png
│ └── ...
└── utils (公共模块)
├── cookie.js （cookie操作）
├── date.js （日期事件）
├── hud.js （交互反馈）
├── monitor.js （监控）
├── object.js （对象转换）
├── request.js （网络请求）
├── router.js （路由跳转）
├── tim.js （IM操作）
├── userInfo.js （用户信息）
└── ...
四、NPM包管理
小程序设置：（注意：上传时，仅支持通过 miniprogram_npm 引入的依赖）
- 本地设置 — 使用npm模块
- 工具 — 构建npm包 — 自动生成 miniprogram_npm 目录
{
"name": "wechat-talent-shop-live",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"cos-wx-sdk-v5": "^0.7.8",
"tim-wx-sdk": "^2.2.1",
"vant-weapp": "^0.5.23",
"weui-miniprogram": "^0.2.0"
}
}
五、应用发布
发布上线：联系管理员
微信开发者工具 — 上传 — 微信公众平台 — 版本管理 — 开发版本 — 提交审核 — 审核版本 — 发布 — 线上版本。
六、问题汇总
- App() 必须在 app.js 中注册，且不能注册多个。
- 编译后的代码包大小需小于 2MB，否则代码包将上传失败。
- 每个页面需要在app.json中进行注册，否则不能访问。
- app.json中pages数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对 pages 数组进行修改。
- 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
- 不要尝试修改页面栈，会导致路由以及页面状态错误。
- tabBar只能配置最少2个、最多5个，tab 按数组的顺序排序。
- 小程序页面只能同时打开 5 个，如果交互流程较长难以支持。
- 同时只能存在 5 个url请求。
- cookie操作，需要开发在request中自己实现。
- 不支持通过302重定向设置cookie。
- 不支持 获取多个setCookie 。
- <live-player>只能添加 <cover-view> <cover-image> <button>。
- <live-player>需要资质，只能真机环境下使用。
- button 样式，open-type才可以获取微信code、用户信息、手机号。
- 获取手机号权限，要非个人主体，且通过认证
- scroller 水平滚动必须添加，外层：white-space: nowrap，内层：display: inline-block。
- Web 和 小程序通过 https://cloud.tencent.com/document/product/269/1629，以群管理员身份来发送消息。
- app.js颜色配置必须是 16进制。
- 体验版，打包需要，通过构建npm，然后引用../../miniprogram_npm路径。
- 体验版，打包体验，需要配置服务器域名。
- 优先调用wx.login，再去调用后面的用户信息API。
- 图片圆角border不够圆，不能使用border-width。
- 两个自定义的js文件之间不可以相互引用。
- Android <scroll-view>组件的 bindscrolltoupper 和 bindscrolltolower 不可以设置为负数。
- 使用catchtap阻止事件冒泡。
- iOS中flex 内容超出可能不会撑起，需要添加flex-shrink: 0。
- swiper组件变化需要重新设置current的值为0。
- 图片垂直排列有间隙，需要设置display: flex; flex-direction: column。
- 标识小程序请求：https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本
七、小程序限制
数量限制
- 底部或顶部可以添加tab按钮区域
tabBar是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。 - 小程序中页面栈最多
10层。
大小限制
-
tabBar上面的按钮iconPath图片路径，icon大小限制为40kb -
tabBar上面的按钮selectedIconPath选中时的图片路径，icon大小限制为40kb -
setData页面传递数据单次设置的数据不能超过1024kB -
setStorage本地缓存最大为10MB - 小程序源码打包后的大小限制为
2M
其他限制
- 不支持打开非业务域名，以及外部链接。
- 不支持扫一扫，长按图片识别二维码，跳转外部链接。
- wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是10个。
网友评论