小程序开发总结

经历了一段繁忙的工作期,还有2天就要过年了。在这里总结一下最新开发微信小程序的心得和体会,算是一个总结,也算温故而知新,如果还能对读者有所帮助,那就更好了。

开发前准备

本文首先假定开发者已经粗略阅读过微信小程序的开发文档,所以注册小程序的流程就不介绍了。不过需要注意,小程序现在只允许企业用户注册,所以认证需要企业营业执照复印件和加盖公章的小程序申请公函。如果是选择对公账户认证,则不需要公函。另外,如果需要使用微信支付接口,则需要另外进行一次微信认证,这个就必须使用300块的方式了,感觉靠给微信认证的公司就挣钱不少。。。

开发工具介绍

我使用的开发工具就是微信官方提供的IDE,现在也有了很多第三方的IDE或者插件,但是用起来感觉整合度不如官方版,索性不换了。新建项目需要输入注册小程序时获取的AppId。需要注意的是设置页面:其中有一项是开发环境不校验请求域名以及TLS版本。这一项需要勾选上,因为微信只支持HTTPS的协议而且必须是指定域名,这让开发者使用localhost调试变的很麻烦,勾选此项之后就没有这种限制了。但只有在开发环境才可以。

功能设计

如图:

开发过程

首先是目录结构:

  • pages:用于存放会员卡、个人信息和注册三个页面的文件
  • utils:放置公共js文件
  • app.js:程序入口
  • app.json:小程序页面配置文件
  • app.wxss:小程序全局样式文件

app.js

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();

}

}

})

这里强调几点:

  • 微信路由接口有三个,分别是wx.redirectTowx.navigateTowx.switchTab
  • wx.navigateTo全局最多调用5次
  • 如果某页面设置为tab页,则只支持wx.switchTab,不支持其他两种路由方式访问

app.json

app.json是全局配置文件。

{

"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

app.wxss控制全局样式。

/**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;//小程序推荐的自适应长度单位

}

reg.wxml

wxml为微信创造的xml标记语言。

<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>

加密解密

关于加密解密,推荐大家阅读小程序基础篇之数据解密,详细且正确。

提交审核

按照官方操作说明进行即可。参照下图:

总结

  1. 有其他MVVM开发经验的话,小程序上手很快,可以将其理解为简化版VUE.js
  2. 微信数据解密是难点,必须严格按照微信提供的解密流程,java需要引入新jar包
  3. 设定页面高度时,必须设置page的height为100%,否则高度设置无效
  4. 重定向路径写法:“/pages/index/index”
  5. 若同一页面中两个input都设置了“focus”属性,则会导致小程序闪退
  6. 在tab中注册的页面,不可使用重定向及新页面接口,只可使用tab切换
  7. 微信规定,整体代码大小不得超过1M,所以图片需使用云存储链接获取

原文发布于微信公众号 - 司想君(sxjsaylife)

原文发表时间:2017-01-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS 开发杂谈

神器 iTools 的巧妙使用

这几天,公司项目不怎么忙,然后利用些业余的时间,想仿一个 app。下面介绍一下如果获取其他 app 的图片资源:

1644
来自专栏腾讯NEXT学位

前端、设计师福利再升级:用FSP彻底拥抱中文WebFont时代

2072
来自专栏北京马哥教育

现代Web页面开发流程

通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式。然后前端的开发人员 (在ThoughtW...

33812
来自专栏程序员的SOD蜜

无需重新编译代码,在线修改表单

    最近在跟朋友一起讨论工作流系统中自定义表单的问题,这些表单用于流程节点的数据处理,比如在请假流程中设计一个请假单。为了使工作流具有很高的灵活性,往往需要...

4036
来自专栏木子昭的博客

sublime长博客利器,自动生成markdown目录

2194
来自专栏武军超python专栏

2018年8月7号升级飞机大战的总结

今天学到的新单词: indentation  n缩进 transform  v改变,变换 collide v碰撞 recursion  n递归

1102
来自专栏数据小魔方

左手用R右手Python系列——任务进度管理

一直觉得运行代码的时候,如果有一个提示任务运行进度的进度条提示就好,很多时候我们的程序运行时间普遍较长,如果程序运行没有任何提示,那简直是一场噩梦,根本不知道到...

3935
来自专栏IT大咖说

2018年1月份最热门的JavaScript开源项目

本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nh...

2988
来自专栏Flutter入门到实战

2017年你绝对想尝试的25个新安卓库(持续更新中...)

这是一份2017年1,2月份发布的25个最佳安卓库的列表,你应该会喜欢,虽然是按顺序排列的,但排名不分先后。让我们开始吧!

2582
来自专栏琯琯博客

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

一、谷歌浏览器插件 二、Sublime Text 插件 三、Phpstorm 插件 四、油猴脚本 4.1 脚本网站 4.2 自用的脚本 五、相关链接 ? 分享...

1.2K8

扫码关注云+社区

领取腾讯云代金券