使用PbootCMS后台开发小程序前的准备工作

一、App秘钥的获取

1、通过微信公众号官网注册微信开发者账号[必需],微信公众平台

1.1、注册注意事项

1.邮箱才是登录账号,但是每次登录微信公众平台都需要微信扫码登录,所以建议使用本人微信号绑定注册

2.切记注册过程中要选择小程序个人账号,选择企业账号是需要通过企业认证的,企业认证需要营业执照等文件

2、登录微信公众平台,点击左侧菜单中的开发,右侧选择开发设置,下方有开发者ID内容区域,通过这里可以查看到本账户的 appid 和 appsecret ,但是 appsecret 默认是不展示的,需要通过重置按钮来进行查看。

3、重置过程中需要微信扫码确认,重置后查看到的 appsecret 秘钥记得保存到本地,否则如果忘记了只能再次通过重置来进行查看,每次重置后获得的秘钥都不同。

二、PbootCMS后台的设置

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"]
}

四、微信小程序api.js的设置

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

 阅 962