【初始篇】Z平台集成微信小程序

本文是 “Z平台 ⇄ 微信小程序” 专栏的第一篇文章，简单讲解一下Z平台是如何集成微信小程序的。未来本专栏会以此实例为基础，逐步讲解【小程序版Z平台】的整体开发过程，有兴趣的同学可以根据我的讲解了解开发微信小程序版管理平台的全过程，包括开发管理平台的一些设计思路与本人积累的一些开发理念。

第一、注册微信小程序。

打开微信小程序官网：https://mp.weixin.qq.com/ ，跟谁网站指引完成注册小程序过程，该注册过程非常简单请大家自行完成。 

 第二、获取新创建小程序的关键参数AppId与Secret

登录微信公众平台，打开【开发 / 开发设置】功能，记录下开发者ID中的  AppID  与 AppSecret 在后续开发中需要用到 

第三、下载安装微信小程序开发工具并创建小程序

下载微信开发者工具安装包，并完成安装，安装过程无特殊设置，请自行完成，个人建议，开发工具最好安装的全英语路径，不要用中文路径。安装完成后启动。

     

使用刚刚流程微信小程序的管理员微信扫码登录。并创新新的小程序项目。

第四、启动Z平台，并绑定微信小程序AppID与密钥信息 

打开Z平台，并使用超级管理员登录，登录运行【设置系统参数】功能，在设置系统参数中，输入微信小程序的AppId与Secret信息。注意，保存信息后需要重启服务或更新系统缓存才生效。

第五、修改小程序代码【为了更好的与Z平台集成】

如果对修改微信小程序不熟的同学可以参考相关帮助资料。

1、创建页面。

【 home：会员中心页面            index：小程序首页           login：登录页面 】

2、修改util.js共用方法文件，添加常用方法。

完整util.js文件如下

【注意：不要忘记在 module.exports = {} 引用方法。以免其它js无法使用自定义的就方法】

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime 
  , isNull, isNotNull, alert, newid, getOpenId
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * 默认引用
const app = getApp();
var util = require('../../utils/util.js');

注意，在util中创建的方法，需要添加到module.exports = {}中，其它js才可以访问
 * 
 */

/**
 * 获取当前用户OpenID
 * 
 * 获取OpenID方法 var openid = wx.getStorageSync('openid');
 */
function getOpenId(globalData){
  //获取微信用户的OpenId
  wx.login({
    success(res) {
      //根据临时ID，获取openId, sessionKey
      wx.request({
        url: globalData.ServerURL + '/jscode2session',
        data: {
          accesskeyid: globalData.accesskeyid,
          accesskeysecret: globalData.accesskeysecret,
          js_code: res.code
        },
        success(res) {
          if (res.data.code == 'SUCCESS') {
            console.log('openid:[' + res.data.data.openid + '] | session_key:[' + res.data.data.session_key + ']');
            wx.setStorageSync('openid', res.data.data.openid);
            wx.setStorageSync('session_key', res.data.data.session_key);
            //判读是否是系统用户
            if (isNotNull(res.data.data.zid)) {
              //zid不为空正式，是系统客户
              console.log('用户ID:[' + res.data.data.zid + ']');
              wx.setStorageSync('zid', res.data.data.zid)
            }else{
              wx.removeStorageSync('zid');
            }
          } else {
            console.log('Error info:' + res.data.msg);
          }
        }
      })
    }
  })
}

function alert(str) {
  wx.showModal({
    content: str,
    showCancel: false//不显示取消按钮
  });
}
/**
 * 判断是否为空
 * @param str
 * @returns {Boolean}
 */
function isNull(str) {
  if (str == '' || str == null || typeof (str) == "undefined" || str == "undefined" || str == "null") {
    return true;
  } else {
    return false;
  }
}

/**
 * 判断是否不为空
 * @param str
 * @returns {Boolean}
 */
function isNotNull(str) {
  if (str != '' && str != null && typeof (str) != "undefined" && str != "undefined" && str != "null") {
    return true;
  } else {
    return false;
  }
}


/**
 * 生成10位随机数
 * @returns
 */
function newid() {
  var i = Math.random() * (999999999 - 100000999) + 100000999;
  var j = parseInt(i, 13);
  return j;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////

3、设置导航菜单

修改app.json文件如下：

{
  "pages": [
    "pages/index/index",
    "pages/login/login",
    "pages/home/home",
    "img"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00326c",
    "navigationBarTitleText": "Z平台",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#00326c",
    "selectedColor": "#e60012",
    "tabbarHeight": "50rpx",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "img/a.png",
        "selectedIconPath": "img/a1.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "img/d.png",
        "selectedIconPath": "img/d1.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.修改初始化js方法

修改app.js文件，让小程序在启动时获取当前微信用户的OpenID，

ServerURL：Z平台服务根目录

accesskeyid：接口密钥ID，在Z平台【系统管理/设置/接口密钥】功能中设置

accesskeysecret：接口密钥

util.getOpenId(); 本方法根据当前微信用户的临时ID获取微信用户的真实OpenID

//app.js
const util = require('utils/util.js');
App({

  // 定义全局变量
  globalData: {
    ServerURL: "http://127.0.0.1/z",//服务器IP或域名
    accesskeyid: 'zz',//接口密钥 keyid
    accesskeysecret: '0000'//接口密钥 keysecret
  },

  onLaunch: function () {
    //获取OpenId
    util.getOpenId(this.globalData);
  }
})

5.测试集成是否成功

微信小程序代码编辑保存时就会自行编译执行，请查看日志，在保存任意代码后，在控制台中是否能够打印出OpenID的日志来判断是否集成成功。

通过以上的配置过程，就完成了微信小程序与Z平台的基础集成过程，后续我会在Z平台微信小程序中实现Z平台各个表单所有的管理功能，通过小程序来完成Z平台表单的一些操作。有学习这方面知识意愿的同学可以关注我的博客，方便查看最新的开发教程文章。