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认证密钥