小程序开发总结

var request = require('utils/requestfun.js');//封装了ajax的实现

App({

data: { //app.js中使用的data

},

globalData: { //全局使用的data

REQUEST_BASE_URL: '',//后台服务器域名

GET_VIP_BR_CODE: '',//请求条形码接口

GET_VIP_QR_CODE: '',//请求二维码接口

channelid: '',

vipcode: null,//初始设置会员卡号为null

wxuserkey: ''//后台返回的解密后信息

},

//获取会员信息

getVipInfo: function (cb) {

var that = this;

if (!that.globalData.vipcode) {

//调用登录接口

wx.login({//微信提供的login接口，可以获得openid及code

success: function (res) {

var code = res.code;

wx.getUserInfo({//微信提供的接口，使用code获取用户信息，包括unionid

success: function (res) {

var params = {

'channelid': that.globalData.channelid,

'code': code,

'res': res

}

request.mnsrequest(that.globalData.REQUEST_BASE_URL + 'weixin/miniappgetvipinfo.action', params, function (mnsres) {//请求项目后台服务器返回会员信息

if (mnsres.data) {

if (mnsres.data.returndata.isregistered) {

var vipcode = mnsres.data.returndata.vipcode;

that.globalData.vipcode = vipcode;

typeof cb == "function" && cb();

} else {

that.globalData.wxuserkey = mnsres.data.returndata.wxuserkey;//此处为后台返回的会员微信信息key，通过此key与后台通信

wx.redirectTo({//微信提供的路由接口，重定向。

url: '/pages/reg/reg'

})

}

} else {

return mnsres.errMsg;

}

})

}

})

}

})

} else {

typeof cb == "function" && cb();

}

}

})

{

"pages": [//所有页面都需要在这里注册后才能使用

"pages/index/index",

"pages/vipinfo/vipinfo",

"pages/reg/reg"

],

"window": {//设置小程序窗体样式及显示文字

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "会员卡",

"navigationBarTextStyle": "black"

},

"tabBar": {//设置Tab页样式

"list": [//设置Tab页列表，最大支持5个

{

"pagePath": "pages/index/index",

"text": "会员卡",

"iconPath": "pages/img/vip.png",

"selectedIconPath": "pages/img/vip2.png"

},

{

"pagePath": "pages/vipinfo/vipinfo",

"text": "个人信息",

"iconPath": "pages/img/info.png",

"selectedIconPath": "pages/img/info2.png"

}

],

"borderStyle":"white"

},

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

},

"debug": true

}

/**app.wxss**/

page{//需要设置page高度，才能正常让空间高度显示为100%

height: 100%;

}

.container {

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

/*border: 1px solid black;*/

background-color: #48c23d;

width: 100%;

height: 100%;

display: flex;//小程序推荐使用flex布局

flex-direction: column;

align-items: center;

justify-content: flex-end;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;

}

.reg_container{

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: flex-start;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;

}

.info_container{

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

font-size: 30rpx;

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: flex-start;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;//小程序推荐的自适应长度单位

}

<view class="reg_container">//view可以简单理解为html中的块状元素

<view class="phone_container">

手机号：

<input class='phone' type="number" placeholder="请输入手机号" maxlength="11" focus bindinput="bindKeyInput" />//使用bind绑定事件

</view>

<view class="vertify_container">

验证码：

<input class='vertify' type="number" placeholder="请输入验证码" maxlength="4" bindinput="bindKeyInput2" />

<button class="vertify_btn" size="default" type="primary" bindtap="getVertifycode" disabled='{{vertical.disabled}}'>{{vertical.value}}</button>//使用双大括号语法进行数据绑定，但只支持单向绑定，若要实现双向绑定，需要借助事件

</view>

<view class="regbtn_container">

<button class="reg_btn" size="default" type="primary" bindtap="regist">注册</button>

</view>

</view>