1.开发前奏
1> 注册小程序
需政府 媒体类 和其他组织申请注册;
2> 开发前准备,绑定开发者
登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者,已认证的小程序可以绑定不多于20个开发者;
3>获取appID
此appid只是微信小程序中的,非公众号中的appid;不能混淆;
4>小程序涉及到会话状态或有登录过程的,需要配置https服务器
也就是说在微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,
只允许和在 mp.weixin.qq.com 中配置好的域名进行通信,
网络请求必须 HTTPS 协议
5>下载安装开发工具
集成了开发调试、代码编辑及程序发布等功能;
6>打开开发工具,用管理员或者绑定的开发者扫码登录
7>新增项目,把获取的小程序appID填上,并打开项目目录;
初学者在文档中下载demo 和quickstart两个列子;地址: https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161107
8>当然需要先了解微信小程序的规则机制,mp中的文档说的很清晰;
2.开发
无涉及到会话过程,跳过此处;
开发前准备或者了解腾讯提供整套的一站式解决方案;
由于微信的网络请求接口 wx.request()
没有携带 Cookies,这让传统基于 Cookies 实现的会话管理不再适用。
通过 wx.login()
获取到用户登录态之后,需要维护登录态。
多种方式解决:
1) 开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识,而应该自己派发一个 session 登录态(请参考登录时序图https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161107)。对于开发者自己生成的 session,应该保证其安全性且不应该设置较长的过期时间。session 派发到小程序客户端之后,可将其存储在 storage ,用于后续通信使用。
2)为了让处理微信小程序的服务能够识别会话,腾讯也推出了 丰富的DSK去解决;
参考连接: https://github.com/tencentyun/weapp-solution
服务端的PHP SDK C# SDK Java SDK Node SDK 等
客户端SDK :weapp-client-sdk
其中也有相应的demo等;
3)自己下载demo搭了一个
3.websocket
微信小程序框架提供了WebSocket请求建立、数据通信、连接关闭等一系列客户端接口,
用于与远程支持WebSocket协议的服务器通信,以便小程序能实现服务器主动push等更接近native的体验。
本地搭建websocket demo,在mp上下载剪刀石头布Demo
代码结构:
app是目录是客户端 就是小程序运行的目录,server是服务端(用的是nodejs,express ,socket.io)
1)本地server服务搭建:
1>安装nodejs (6版本以上) 略
我nodejs本地版本:
2> 进入server目录,将server目录下的.ts转换成.js文件
Boby-Mac:server boby$ sudo npm install typescript -g
Boby-Mac:server boby$ tsc app.ts #就看到.js文件生成了
3>启动服务
Boby-Mac:server boby$ PORT=9595 node app.js
本地服务搭建成功
2)小程序app配置
1>创建项目,不要开启ES6转ES5(app中用到); 开发环境下不校验
2>本地小程序工具现在是v0.11.112301 的版本,app调试的时候promise报错(暂不支持ES6),从网上下载了一个promise.js放入本地app/lib下,
在app/lib/co.js app/lib/promiseify.js app/lib/wxsocket.io.js app/page/game/game.js 中require promise.js
3>在app/config.js 文件中host:\'localhost:9595\'
4>在app/pages/game/game.js 中 修改成socket连接本地的ws协议的(ws://localhost:9595)
最后搭建成功了
附上相关文档资源:
https://www.qcloud.com/solution/la.html?utm_source=pcsem1&utm_medium=bdgj3397&utm_campaign=baidu
https://mp.weixin.qq.com/debug/wxadoc/introduction/
请发表评论