受欢迎的博客标签

WeChat Mini Programs (1)-小程序注册、申请、开发工具,开发、发布流程记录

Published

doc

English version

https://developers.weixin.qq.com/miniprogram/en/dev/devtools/devtools.html

概览

微信小程序相比于微信公众号的开发,区别在于微信小程序只请求第三方的数据,整个界面的交互(view)还是在微信小程序上实现,前后端完全分离;

微信小程序开发与具体的后台语言无关,C#,Java,Python都行,只要前端UI开发完成,访问对应的数据服务接口;而微信公众号的开发,是直接请求第三方的web界面。

微信小程序更轻量级,用来做一些餐饮店在线点单,小小的网上商城,微信小程序要求必须通过 HTTPS 完成与服务端通信,要购买SSL证书,然后搭建一个站点。

 
批注:

如果要正式发布,需要搭建https的站点。首先需要租用一台服务器至少3个月,并拥有一个固定IP;

其次就是要购买域名以及SSL证书;

最后就是在网站发布后,要申请域名备案。一切准备妥当,小程序就可以上线了。

具体而言,如果自建服务器来支持小程序开发,要走以下几步

1、购买域名
2、域名备案
3、购买服务器
4、为支持HTTPS,而购买SSL证书,当然也有免费的
5、开始正式进入编写api接口

 

微信小程序注册、登录、认证、开通支付官方手册:https://developers.weixin.qq.com/miniprogram/introduction/
 
微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/

 

按照文档申请了小程序的开发者账号,批注:没有账号是登录不了开发工具的,也无法发布代码

 

Quick Start

申请开通小程序

注册  - 用唯一邮箱注册(注:指未曾在微信4大平台体系中注册过的邮箱)

资质审核 - 需要审核小程序的主体的相关资质(递交整套企业资质资料,本人复用了公众号的资质)

绑定管理员 - 修改小程序的基本信息,都需要管理员扫描确定

修改小程序的基本信息 -  展示给用户的小程序名称、图标等

 

生成开发者ID - appid appAppSecret  ,小程序的唯一标识,类似于人的身份证号

开发者账号:Wechat Develoepr Account

https://global.developer.mi.com/document?doc=quickStart.quickStartOverlook

 

Table of Contents

 

1.小程序第一次开发流程

step 1.Register an account on WeChat Open Platform 申请和登陆

register a Mini App from  China

本人已有公众号,公众号是已经通过了资质认证的。所以采用复用公众号资质的方式注册小程序

此步的目的是完成在官网申请小程序。申请成功后,我们将得到一些关于小程序的参数,这些参数在接下来的开发工具中需要用到。

登陆地址:https://mp.weixin.qq.com/

 

other

没有公众号的情况下,全新注册流程

注册地址:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

官方操作手册

https://developers.weixin.qq.com/miniprogram/introduction/

step 2.小程序资质审核

快速注册途径:公众号复用资质注册小程序

1.个人类型公众号:暂不支持个人类型公众号复用资质创建小程序。请按线上流程完成小程序创建

2.企业微信公众号:支持企业类型公众号复用资质创建小程序。以无入口,20240118

register a Mini App from overseas – with a Foreign business license

step 3.小程序绑定管理员微信号

 

step 4.完善小程序信息(补充小程序的基本信息,如名称、图标、描述等)

Other

微信小程序如何正确登录微信小程序后台?

第一步,登录微信公众平台地址,注意微信小程序登录地址同微信公众号登录是一个地址,地址为:https://mp.weixin.qq.com/

第二步,选择扫码登录,用微信小程序管理员的微信扫描二维码,扫码后可选择对应的小程序登录,就可以进入小程序后台了。

or

第二步,选择输入微信小程序账号密码登录,验证密码正确后,进入管理员确认,如图,注意:微信小程序的账号和密码和你的公众号账号和密码不一样!

 

 

2.小程序第1次创建项目流程

step 1.Install IDE (Integrated Development Environment)项目开发

(一)Download the IDE (Integrated Development Environment)下载并安装开发者工具

Chinese version

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

English version

https://developers.weixin.qq.com/miniprogram/en/dev/devtools/download.html

step 2.新建项目

本地创建一个文件夹,文件夹名称对应一个项目,以便于多项目管理

选云、普通二者之一

创建项目

打开并登录微信开发者工具,新建小程序项目,填入 AppID,后端服务选择“微信云开发”并勾选同意"云开发服务条款

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/quick-start/miniprogram.html

 

1.小程序云项目开发步骤(注册、工具下载、新建项目)

https://blog.csdn.net/u013338742/article/details/82842883

WeChat Mini Program project structure 小程序页面结构介绍

step 3.小程序页面结构介绍

https://www.cnblogs.com/laoyeye/p/9795306.html

https://www.iaspnetcore.com/Blog/BlogPost/5be440c1799c9d47acb81dc9/wechat-mini-programs-6-project-structure

(三)删除项目

在开发工具的“项目管理”,有项目列表和删除选项

https://blog.csdn.net/henryhu712/article/details/80004589

 

    

(三)注意点

1.小程序强制后台域名配置条件

必须是https协议;备案;80端口

Make sure the 3rd party services you are calling from your Mini Program got an ICP (Internet Content Provider) license

HTTPS

Whitelist the 3rd party service provider URL in WeChat Back-End

必须是https安全协议,否则接口调用会失败 网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了。 在小程序中服务端接口的开发跟一般的接口是一样的,一般的接口大部分都采用的http协议,但是,小程序要求必须是https安全协议,否则接口调用会失败,这是强制的。所以,我们的服务端必须安装安全证书,采用https协议对外发布接口。 网络上提供安全证书的服务商很多, 比如赛门铁克,有收费何免费的证书。如果是企业应用,建议去买一个企业级的安全证书,如果只是个人开发研究的话,这里给大家介绍一个比较靠谱的免费安全证书——阿里云。阿里云给个人用户提供不限时长的免费证书,注意一定是个人用户,企业用户是没有这个福利的

2.通信服务器域名必须已备案 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布 https://www.cnblogs.com/jjg0519/p/6858443.html

 

小程序云开发数据导入-json格式

{
    "_id": "xxxxxx",
    "age": 45
}
{
    "_id": "yyyyyy",
    "age": 21
}

bug:带_id导入后无法读出记录

 

 

 

3、小程序的发布流程

(一)小程序版本的区分

(1)开发版本(体验版):用web开发工具正在开发的那个版本,指点击“上传”的那个版本。仅开发者能用手机扫描运行。

(2)审核版本:用web开发工具点击“上传”的那个版本。在后台可以加入体验者微信号,仅仅这些被后台加入的体验者能用手机运行

(3)线上版本(生产版):审核版本被审核通过后,可以提交为线上版本,向全网开放。

(二)小程序的第1次发布

step 1.用web开发工具点击“上传”的版本,在后台变为“开发版本”

step 2.后台变为“体验版”。--此时仅对在后台加入被邀请的体验者可以见。

step 3.在后台选择“体验版”,点击提交,在后台变为“待审核版本”。      --此时等待官方审核,有审核通过审核未通过两种结果。

step 4.在后台看到审核通过后,在后台点击"发布",即向全用户发布  --此时对所有用户公开可见。

(三) 小程序审核不通过的原因及处理


1:小程序功能不符合规则:
  (1) 你好,当前提审小程序包中可能包含明文的AppSecret,存在泄漏的安全风险。一旦被恶意用户通过技术手段获取你的AppSecret,对方可以通过调用API获取你的小程序敏感数据,如接口调用凭证、用户信息、用户使用数据、小程序码等。出于安全考虑,开发者应将AppSecret保存 到后台服务器中,并严格保密,不向任何第三方等透露。建议你立即调整技术方案,去除小程序包中的AppSecret字样并重置可能已泄漏的AppSecret,消除风险。参考文档
请根据上述原因对小程序进行修改,并重新提交代码审核。

(2)小程序【首页】等页面无具体运营内容,请上架正式内容或商品(非测试)后重新提交。

 

 

3.小程序第一次线上版本发布前应做的准备工作

1.客户端基础库的处理

在小程序管理平台设置最低基础库版本,版本设置要和开发版基础库保持一致。低于此版本时,系统会自动提示用户微信升级。

2.确保客户立即使用小程序最新的版本

用小程序强制更新机制来实现

3.客户小程序运行环境检查

包括网路是否连接,微信版本是否合格,后台服务器是否正常。

4.对版本上线后小程序出错的应急处理机制

(1)完整的错误日志记录

(2)小程序日志记录

(3)用户错误反馈功能(含截屏)

 

 

3.1 检查基础库版本和开发工具是否保持一致

小程序管理后台设置最低基础库版本

设置流程
登录小程序管理后台,进入“设置->基本设置->基础库最低版本设置”进行配置。

 

3.1.1.1微信小程序云开发-自动鉴权免解密获取手机号码

开发工具->详情->调试基础库:版本修改为2.7.0,并推送至云端

否则出现

wx.cloud.CloudID is not a function错误

3.1.1.2 小程序端云开发在小程序端使用update,remove报错问题?

errMsg: query.update is only available in server SDK / API; [Component] Event Handler Error @ components/form/index#inputItemMethod
Error: errCode: -1  | errMsg: query.update is only available in server SDK / API

调试基础库需要版本2.9.4以上

3.1.1.3 基础库2.2.3 或以上的基础库以使用云能力

 

线上版本错误处理方式

1.用真机调试

 

2.在小程序WEB(mp.weixin.qq.com)管理后台-》开发》运维中心>错误查询

查看出错信息

at Function (lib/regenerator-runtime/runtime.js:747:3) 

TypeError: Function(...) is not a function
TypeError: Function(...) is not a function
at Function (lib/regenerator-runtime/runtime.js:747:3)
at require (WASubContext.js:1:1014438)
at at (WASubContext.js:1:1014048)
at require (pages/adminEmployee/ManagerChannel/index/index.js:3:28)
at require (WASubContext.js:1:1014438)
at at (app-service.js:5876:10)

 

微信小程序官方要求变更日志

20230901-微信小程序必须备案

2023年9月1日,官方要求微信小程序必须完成备案后才可上架。

source:https://developers.weixin.qq.com/community/develop/article/doc/00060696d3c0a851fc30af38761013

 

Handle errors in ASP.NET Core Blazor

  1. Authorization requires a cascading parameter of type Task\<AuthenticationState>. Consider using CascadingAuthenticationState to supply this
  2. How to Turn on Detailed Exceptions in CircuitOptions.DetailedErrors with server-side Blazor
  3. JavaScript深入之执行上下文栈
  4. JavaScript深入之变量对象
  5. JavaScript深入之作用域链
  6. JavaScript深入之从ECMAScript规范解读this
  7. JavaScript深入之执行上下文
  8. JavaScript深入之闭包
  9. JavaScript深入之参数按值传递
  10. JavaScript深入之call和apply的模拟实现
  11. JavaScript深入之bind的模拟实现
  12. JavaScript深入之new的模拟实现
  13. JavaScript深入之类数组对象与arguments
  14. JavaScript深入之创建对象的多种方式以及优缺点
  15. JavaScript深入之继承的多种方式以及优缺点
  16. JavaScript深入系列15篇正式完结!
  17. JavaScript深入之浮点数精度
  18. JavaScript深入之头疼的类型转换(上)
  19. JavaScript深入之头疼的类型转换(下)

专题系列目录

  1. WeChat Mini Program-Register an account on WeChat Open Platform
  2. WeChat Mini Program-小程序开放的服务类目(官方)
  3. JavaScript专题之数组去重
  4. JavaScript专题之类型判断(上)
  5. JavaScript专题之类型判断(下)
  6. JavaScript专题之深浅拷贝
  7. JavaScript专题之从零实现jQuery的extend
  8. JavaScript专题之如何求数组的最大值和最小值
  9. JavaScript专题之数组扁平化
  10. JavaScript专题之学underscore在数组中查找指定元素
  11. JavaScript专题之jQuery通用遍历方法each的实现
  12. JavaScript专题之如何判断两个对象相等
  13. JavaScript专题之函数柯里化
  14. JavaScript专题之偏函数
  15. JavaScript专题之惰性函数
  16. JavaScript专题之函数组合
  17. JavaScript专题之函数记忆
  18. JavaScript专题之递归
  19. JavaScript专题之乱序
  20. JavaScript专题之解读 v8 排序源码
  21. JavaScript专题系列20篇正式完结!
  22. JavaScript专题之花式表示26个字母

 

Google Cloud Platform

Useful Github resources and repositories to get started with Mini Program development

小程序-云开发版

1.1小程序 AI 服务

https://cloud.tencent.com/document/product/876/19531

源代码DEMO:

https://github.com/TencentCloudBase

1.2 微信小程序组件 / API / 云开发示例(官方DEMO)

https://github.com/wechat-miniprogram

说明文档:

https://developers.weixin.qq.com/community/develop/doc/000ce205e88a580622f7cf2f351c01?idescene=7&op=1

 

2.小程序云开发项目实战之私房书柜 (小程序云)

https://github.com/Tencent-CloudEDU/WXCloud-bookcase

3.天气应用微信小程序(云开发)

https://www.cnblogs.com/myvin/p/9243416.html

https://github.com/myvin/quietweather

4. 糗皮虎(云项目)小程序云开发项目 新增 点赞,发布,评论,分享等功能

https://blog.csdn.net/u013338742/article/details/82842883

https://github.com/LWJcoder/qiupihu

5.小程序+云开发实战:一天搭建小型论坛

https://mp.weixin.qq.com/s?__biz=MzI2NDU4OTExOQ==&mid=2247485621&idx=1&sn=9253fc67199b085680cf6eab332e2337&chksm=eaab12e5dddc9bf390634a30346a47514cd5524c939b89e6b00bda9c2b3e3c80365a523b1894&mpshare=1&scene=23&srcid=1219EykPyVb3y9ftZ2A3ExYO#rd

https://github.com/vimerzhao/RssHub

5.2 基于云开发的小程序项目--仿《微博鲜知》

组件化思想

博客:https://github.com/g00d-morning/newsDance/tree/master/weiboFresh/miniprogram/components

https://github.com/g00d-morning/newsDance/tree/master/weiboFresh

5.3 烟草行情管理

简单管理数据的自用小程序

https://github.com/JunwuHuang/tobaccoMarket

 

6.微信小程序-水果商城-云开发

https://github.com/Voyzz/Fruit-store-mp

7.外卖小程序(云开发)

blog:https://cloudbase.net/community/share/articles/08e51e265f1e8996008220867cafe7ff.html?from=10004

https://gitee.com/laeser/dinner-cloud

 

mini-blog

https://github.com/CavinCao/mini-blog

mini-blog是一款基于云开发的博客小程序,该小程序完全不依赖任何后端服务,无需自己的网站、服务器、域名等资源,只需要自行注册小程序账号即可。

 

 

小程序-普通版(前台)

 

8.微信小程序之小豆瓣图书(普通)

http://oopsguy.com/2016/10/17/weixin-small-program-doubanbook/

https://github.com/oopsguy/WechatSmallApps

 

9.微信小程序之知乎日报

http://oopsguy.com/2016/10/24/wechat-small-program-zhihudaily/?

9.1 cloudNote

基于微信的一个云笔记小程序,每个用户可以实时登录记录自己的日常笔记,同时具有地点提醒以及时间提醒事件的功能.

https://github.com/EdenStrive/cloudNote

 

10.掘金微信小程序(普通、大型项目)

https://www.cnblogs.com/myvin/p/9510079.html

https://github.com/myvin/juejin

11.yyblog(普通)

https://www.cnblogs.com/laoyeye/p/9795306.html

https://github.com/allanzhuo/yyblog/tree/master/yymini

 

13.微信小程序商城(普通)

https://github.com/EastWorld/wechat-app-mall

 

15.FaShop 微信小程序商城,微信小程序微店(普通)

https://github.com/mojisrc/wechat-mini-shop

 

 

15.微信小程序开源项目库汇总

https://github.com/opendigg/awesome-github-wechat-weapp

17.小程序开发干货汇总

https://github.com/xiaobei666/weixin-xiaochengxu666-info

 

小程序商城后台

1.1mpvue构建微信小程序(普通)-mall 小程序商城后台数据结构  js

https://github.com/Mosasa/wx-mpvue/blob/master/koa/db.js

开发文档:简易商城小程序全栈开发(mpvue+koa+mongodb),对应https://github.com/EastWorld/wechat-app-mall的后台

https://juejin.im/post/5b548ce8e51d45191d79f8a6

2.1 NideShop商城(服务端) js

https://github.com/tumobi/nideshop

mysql 后台数据结构:https://raw.githubusercontent.com/tumobi/nideshop/master/nideshop.sql

博客:快速部署NideShop Node.js微信小程序商城

https://www.jianshu.com/p/78a0f5f424e1

7.微信小程序 商城 前台+后台 (云开发版)

后台为云数据库

https://github.com/pzx521521/wxapp-mall-clouddb

 

8.EastWorld/wechat-app-mall的云版前台(第3方后台)js
https://github.com/EastWorld/wechat-app-mall(普通)

详细配置/使用教程

blog:https://www.it120.cc/help/ikfe2k.html

对应的云开发板前台

https://github.com/cherryxiu/wechat_mall

备注:

mpvue构建微信小程序(普通)-mall 小程序商城后台数据结构

https://github.com/Mosasa/wx-mpvue/blob/master/koa/db.js

开发文档:简易商城小程序全栈开发(mpvue+koa+mongodb),对应https://github.com/EastWorld/wechat-app-mall的后台

https://juejin.im/post/5b548ce8e51d45191d79f8a6

EastWorld

odoo后台,对接了EastWorld的前端
github地址:https://github.com/JoneXiong/oejia_weshop  (py)

blog:https://blog.csdn.net/qq_37816503/article/details/95122104

 

16.m-mall

前台:https://github.com/skyvow/m-mall  js

后台:微信小程序-小商城后台(基于 Node.js、MongoDB、Redis 开发的系统...)

https://github.com/skyvow/m-mall-admin

 

14.NideShop:基于Node.js+MySQL开发的开源微信小程序商城(微信小程序)

https://nideshop.com/

微信小程序端,GitHub: https://github.com/tumobi/nideshop-mini-program

商城服务端,GitHub: https://github.com/tumobi/nideshop     (NideShop 开源微信小程序商城服务端 API(Node.js + ThinkJS)

 

界面库 -小程序UI组件库

30.有赞的界面库 vant-weapp

https://youzan.github.io/vant-weapp/#/intro

31.WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

31.1https://github.com/Tencent/weui-wxss

31.2 使用案列:

31.2.1

https://weui.io

https://github.com/skyvow/m-mall基于 WeUI.wxss

 

31.2.2 小歆记账 for 微信小程序

https://github.com/xiaoxinpro/xxjzWeChat

31.2.3微信小程序音乐播放器(小程序模仿——网易云音乐) Leancloud,weui.wxss,Promise

博客:https://juejin.im/entry/591968b9da2f60005df65c70

项目地址:https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/tree/master/pages

31.2.4 音乐-微信小程序(原生开发)

https://github.com/wuzhizhe114/musicMiNiProgram

31.2.5 简单的留言板项目

https://github.com/kkkkung/Wexin-miniprogram-MessagesBoard

31.2.6 基于weui的html转微信小程序wxml

https://github.com/rrrrui/html2wxml

31.2.7 小程序demo,weui+tabbar+分包+iconfont使用+自定义顶部导航+组件传值+wx.request封装

https://github.com/lanzhsh/mini-program-demo

31.2.8 微信小程序-移动端小商城

基于 weui.wxss、es6 前端技术开发

https://github.com/skyvow/m-mall

weui

1.weui项目地址

https://github.com/weui/weui-wxss/

2.weui自定义微信小程序modal框

https://blog.csdn.net/dlz_Mr/article/details/87997586

32.iviewui

https://weapp.iviewui.com/docs/guide/start

32.weui css

微信提供de开源的移动版的weui css框架.

https://github.com/Tencent/weui

样例参考:https://weui.io/

5个最优秀的微信小程序UI组件库

https://www.cnblogs.com/elysian/p/10114297.html

 

富文本组件

输入图片和文字,且合并

https://github.com/xc1255178487/little_program

 

微信小程序框架

现在大部分都是用框架开发小程序,react用taro, vue用uni-app

40.wepy

组件化开发框架wepy

开发文档 https://tencent.github.io/wepy/document.html#/

41.mpVue

美团小程序框架mpvue

开发文档 http://mpvue.com/

 

https://github.com/tumobi/nideshop-mini-program (NideShop:基于Node.js+MySQL开发的开源微信小程序商城(微信小程序)
https://github.com/EastWorld/wechat-app-mall (微信小程序商城,微信小程序微店)
https://github.com/ecomfe/echarts-for-weixin (ECharts 的微信小程序版本)
https://github.com/sqaiyan/NeteaseMusicWxMiniApp (仿网易云音乐APP的微信小程序)
https://github.com/zce/weapp-demo (仿豆瓣电影微信小程序)
https://github.com/myvin/juejin (掘金小程序)
https://github.com/xiehui999/SmallAppForQQ (高仿手机QQ应用程序
https://github.com/liuxuanqiang/wechat-weapp-mall (微信小程序-移动端商城)
https://github.com/web-Marker/wechat-Development (微信小应用-小程序-demo-仿芒果TV)
https://github.com/lanshan-studio/wecqupt (We重邮 - 微信小程序 )
https://github.com/RebeccaHanjw/weapp-wechat-zhihu (微信中的知乎--微信小程序 demo)
https://github.com/eyasliu/wechat-app-music (微信小程序:音乐播放器 )
https://github.com/skyvow/m-mall (微信小程序-小商城前台(基于 WeUI.wxss、ES6 前端技术开发...)
https://github.com/sesine/wechat-weapp-movie (电影推荐 - 微信小程序)
https://github.com/ahonn/weapp-one (仿 「ONE · 一个」 的微信小程序)
https://github.com/kraaas/timer (小程序版番茄时钟)
https://github.com/hijiangtao/weapp-newsapp (微信小程序-公众号热门文章信息流)
https://github.com/zhengxiaowai/weapp-github (微信小程序--github)
https://github.com/vace/wechatapp-news-reader (微信小程序 —— 新闻阅读器)
https://github.com/natee/wxapp-2048 (微信小程序2048)

 

博客

1.小程序普通版

1.1微信生成带参数的二维码,合成海报,扫码后推送小程序

场景:公司开发的小程序要实现将产品免费给用户试用的功能,用户登录小程序后在产品页可以将产品以二维码海报的方式分享给微信好友,好友扫码后跳转公众号,关注后公众号推送小程序,点击小程序后跳转到小程序中的相应产品页面。

https://blog.csdn.net/xiaoxiangzi520/article/details/82622141

2 小程序实战商城

2.1 微信小程序之购物车 —— 微信小程序实战商城系列(5)普通

https://blog.csdn.net/michael_ouyang/article/details/70755892

 

How to develop a WeChat Mini Program: requirements, tools, best practices, how is it different from a web application?

https://wechatwiki.com/wechat-resources/how-to-make-wechat-mini-program-development-tool-requirements-github/

 

开发工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

小程序开发索引目录

 

 

小程序SDK(c#)

1.Magicodes.WxMiniProgram.Sdk

blog:https://www.cnblogs.com/codelove/p/12175125.html

2.Senparc.Weixin

Senparc.Weixin.WxOpen

微信小程序 C# SDK

https://github.com/JeffreySu/WeiXinMPSDK/tree/master/src/Senparc.Weixin.WxOpen