1、通过微信公众号官网注册微信开发者账号[必需],微信公众平台
1.1、注册注意事项
1.邮箱才是登录账号,但是每次登录微信公众平台都需要微信扫码登录,所以建议使用本人微信号绑定注册
2.切记注册过程中要选择小程序个人账号,选择企业账号是需要通过企业认证的,企业认证需要营业执照等文件
2、登录微信公众平台,点击左侧菜单中的开发,右侧选择开发设置,下方有开发者ID内容区域,通过这里可以查看到本账户的 appid 和 appsecret ,但是 appsecret 默认是不展示的,需要通过重置按钮来进行查看。
3、重置过程中需要微信扫码确认,重置后查看到的 appsecret 秘钥记得保存到本地,否则如果忘记了只能再次通过重置来进行查看,每次重置后获得的秘钥都不同。
1、搭建一个PbootCMS后台来准备微信小程序的测试
2、搭建好后进入PbootCMS后台填写授权码,然后在[全局配置] -> [配置参数] -> [WebAPI]中将API状态改为启用
其中API认证用户,即为 您的 appid,API认证秘钥,即为 您的 appsecret
API认证用户 -> appid -> wx12345678910
API认证秘钥 -> appsecret -> ffd4decedc959c55c050e536c390b7da
1、新建项目,选择小程序
项目名称自定义,我选择建立的是Pboot
选择一个项目路径,也可以提前建立好,例如在D盘根目录建立一个wxproduct文件夹,里面新建一个Pboot,然后选择这个路径,小程序会自动帮您将项目名称定义为Pboot。
Appid可以选择测试号或者填写微信公众号获得的那个。测试号可以无限次申请和使用。
后端服务选择 不使用云服务,因为使用的是自己的空间和域名。
语言选择 JavaScript
新建完成后进入 app.json 文件中修改配置文件,例如下方所示
{ "pages": [ // 配置页面,pages为页面文件夹,后面两个名字最好设置相同名字,本文件中配置保存后微信开发者工具会自动创建对应文件夹 "pages/index/index", "pages/logs/logs" ], "window": { // 导航栏背景颜色 "navigationBarBackgroundColor": "#ffffff", // 导航栏标题文字内容 "navigationBarTitleText": "", // 导航栏标题颜色,仅支持 black / white "navigationBarTextStyle": "black", // 下拉 loading 的样式,仅支持 dark / light "backgroundTextStyle": "dark" }, // 小程序底部nav组件 "tabBar": { // tab 上的文字默认颜色,仅支持十六进制颜色 "color": "#6e6d6b", // tab 上的文字选中时的颜色,仅支持十六进制颜色 "selectedColor": "#ff9966", // tabbar 上边框的颜色, 仅支持 black / white "borderStyle": "black", // tab 的背景色,仅支持十六进制颜色 "backgroundColor": "#ffffff", "list": [ // 此处配置底部nav内容,最少 2 个、最多 5 个 tab { // 页面路径,必须在 pages 中先定义 "pagePath": "pages/index/index", // tab 上按钮文字 "text": "首页", // 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 "iconPath": "images/tabBar/home.png", // 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 "selectedIconPath": "images/tabBar/home_on.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/tabBar/logs.png", "selectedIconPath": "images/tabBar/logs_on.png" } ], // tabBar 的位置,仅支持 bottom / top "position": "bottom" }, // 各类网络请求的超时时间,单位均为毫秒。 "networkTimeout": { "request": 10000, "downloadFile": 10000 }, // 开发者调试模式 "debug": true, // 当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序 appId 列表,最多允许填写 10 个。 "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"] }
1、若在PbootCMS后台开启了强制认证,需要先在api.js中引入md5.js文件。(不知道 api.js 为何物的请返回上一条第四步查看)
放在 api.js 文件顶部,实际引用过程中根据实际路径进行更改。const md5 = require('md5.js');
2、搭建好后进入PbootCMS后台填写授权码,然后在[全局配置] -> [配置参数] -> [WebAPI]中将API状态改为启用
其中API认证用户,即为 您的 appid,API认证秘钥,即为 您的 appsecret
3、设置 apiurl, appid,appsecret 三个参数,如下方示例:
var apiurl = 'https://www.pbootcms.com/api.php'; //域名 + api.php
var appid = 'wx12345678910'; //后台WebAPI中设置的AppID
var appsecret = '12334356465765867878943'; //后台WebAPI中设置的API认证密钥