大家好，从本章开始，我将记录微信小程序版Z平台的完整开发过程。在这里没有对代码做过多的说明，只是和大家说明一下小程序的开发的流程。具体技术方法大家还需要查看帮助文档自行学习。
目录
第二、准备好公用JS方法代码，所有公用方法都写在utils/utils.js中
第三、设置小程序启动参数设置与初始化方法，在app.js文件中
基础环境代码准备
第一、根据Z平台的设计规划出基本页面。
pages/login 登录页面
pages/index 登录后主页面
pages/zform 功能选择页面
pages/messages 通信功能页面
pages/home 个人中心页面
第二、准备好公用JS方法代码，所有公用方法都写在utils/utils.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') { wx.setStorageSync('openid', res.data.data.openid); wx.setStorageSync('session_key', res.data.data.session_key); //判读是否是系统用户 if (isNotNull(res.data.data.zid)) { //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; } ////////////////////////////////////////////////////////////////////////////////////////////////////////////第三、设置小程序启动参数设置与初始化方法，在app.js文件中
//app.js const util = require('utils/util.js'); App({ // 定义全局变量 globalData: { ServerURL: "http://192.168.1.123/z",//服务器IP或域名 accesskeyid: 'zz',//接口密钥 keyid accesskeysecret: '0000'//接口密钥 keysecret }, onLaunch: function () { //获取OpenId util.getOpenId(this.globalData); } })第四、设置小程序头部样式与底部导航设置，在app.json中设置
{ "pages": [ "pages/login/login", "pages/index/index", "pages/zform/zform", "pages/messages/messages", "pages/home/home" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#213477", "navigationBarTitleText": "Z平台", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#6a6a6a", "selectedColor": "#213477", "tabbarHeight": "50rpx", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "img/a.png", "selectedIconPath": "img/a1.png" }, { "pagePath": "pages/zform/zform", "text": "功能", "iconPath": "img/b.png", "selectedIconPath": "img/b1.png" }, { "pagePath": "pages/messages/messages", "text": "通信", "iconPath": "img/c.png", "selectedIconPath": "img/c1.png" }, { "pagePath": "pages/home/home", "text": "个人中心", "iconPath": "img/d.png", "selectedIconPath": "img/d1.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
开发登录功能
第一、页面wxml文件设置
<image class="login_brackimg" src="/img/login_brackimg.jpg" mode="widthFix"></image> <view class="login_button_view"> <input class="logininput" type="text" placeholder=" 请输入账号 " maxlength="20" bindblur="username_bindblur"/> <input class="logininput" type="text" placeholder=" 请输入密码 " maxlength="20" bindblur="password_bindblur" password="true"/> </view> <view class="loginbutton" bindtap="usernamelogin">登 录</view>第二、样式wxss文件设置
.login_brackimg{ width: 750rpx; } .login_button_view{ padding-top: 70rpx; padding-left: 60rpx; padding-right: 60rpx; margin-bottom: 50rpx; } .loginbutton{ background-color: #00326c; color: #fff; margin-top: 40rpx; margin-left: 60rpx; margin-right: 60rpx; padding-top: 20rpx; text-align: center; font-size: 40rpx; height: 80rpx; border-radius: 20rpx; } .logininput{ height: 100rpx; font-size: 35rpx; background-color: #DCE9F1; margin-top: 20rpx; border-radius: 20rpx; padding-left: 30rpx; }第三、功能js文件设置
// pages/login/login.js const app = getApp(); var util = require('../../utils/util.js'); Page({ /** * 页面的初始数据 */ data: { username: "", password: "", orgid:"" }, username_bindblur:function(e){ if (util.isNotNull(e.detail.value)){ var that = this; //获取账号所属组织信息 wx.showLoading({ title: '加载中' }); wx.request({ url: app.globalData.ServerURL + "/getUserOrgForUserId", data: { userId: e.detail.value }, success(res) { wx.hideLoading(); if (res.data.code == 'SUCCESS') { that.setData({ username: e.detail.value }); var orgCount = res.data.data.length; if (orgCount == 1) { that.setData({ orgid: res.data.data[0].zid }); } else if (orgCount > 1) { //一个用户在多个组织下有权限 var itemlistTitleArray = new Array(); var itemlistZidArray = new Array(); for (var i = 0; i < res.data.data.length;i++){ itemlistTitleArray[i] = res.data.data[i].full_org_name; itemlistZidArray[i] = res.data.data[i].zid; } wx.showActionSheet({ itemList: itemlistTitleArray, success(res) { //根据选择组织设置orgid that.setData({ orgid: itemlistZidArray[res.tapIndex] }); }, fail(res) { //如果选择取消，取第一个组织的ID为orgid that.setData({ orgid: itemlistZidArray[0] }); } }) } else { util.alert('该账号无所属部门信息|' + res.data.msg); } } else { util.alert('该账号无所属部门信息|' + res.data.msg); } } }); } }, password_bindblur: function (e) { this.setData({password: e.detail.value}); }, //打开账号登录页面 usernamelogin: function (e) { //验证账号密码信息 if(util.isNotNull(this.data.username)){ if (util.isNotNull(this.data.password)) { if (util.isNotNull(this.data.orgid)) { wx.showLoading({ title: '登录中' }); wx.request({ url: app.globalData.ServerURL +"/UserLoginJson", data: { user_id: this.data.username, password: this.data.password, orgid: this.data.orgid }, success(res) { wx.hideLoading(); if (res.data.code == 'SUCCESS') { wx.setStorageSync('user', res.data.data.user); wx.setStorageSync('org', res.data.data.org); //打开主页面 wx.reLaunch({ url: '/pages/index/index' }) } else { util.alert('登录失败|' + res.data.msg); } } }); } else { util.alert("该账号无所属部门信息,无权限登录"); } } else { util.alert("请输入密码"); } }else{ util.alert("请输入账号"); } }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var user = wx.getStorageSync('user'); if (util.isNotNull(user.zid)) { wx.reLaunch({ url: '/pages/index/index' }) } } })在JS文件中调用的后台方法，大家可以自行下载Z平台源码查看，就不在这里过多解释了，都是一些简单登录的验证方法。好了，经过以上的步骤大家可以启动测试一下了。
