伤不起的微信小程序

289 阅读4分钟

伤不起的微信小程序

先说一些大家上手小程序时都会问到的问题:

Q:小程序可以和现有的App 打通吗?
A:小程序可以借助微信联合登录,和开发者已有的App 后台的用户数据进行打通,但不会支持小程序和App 直接的跳转。
Q:微信已经有了订阅号、服务号、企业号,小程序和这三者有什么不同?
A:小程序、订阅号、服务号、企业号是并行的体系。
Q:小程序可以个人开发吗?
A:小程序允许个人开发,只是个人开发是不能发布的,并且想在真机上看到的话,在创建小程序时就得填上你申请好的appid。
Q:小程序需要付费吗?
A:个人是不需要的,公司的需要一个被认证过的微信服务号,不需再付额外的费用(需要注意小程序申请时名字及icon的确认)。

开始正题:重要的事情说
n遍(认真看文档,仔细看文档,认真仔细看文档,虽然微信的官方文档写的不清不楚)。长度单位基本使用rpx(这是小程序特有的单位,可以理解为一个百分比),它是把屏幕宽分为750等份,所以我们在开发时,最好要求UI设计师提供750px宽度的图,然后在iPhone6上面开发。在这我们得注意一个点,模拟器上面的UI展示效果和真机上的有时还是有差别的,所以我们在模拟器上调试后好,一定要用不同真机看看效果,必要时可以根据不同机型稍作调整(苹果手机还好,如果是安卓手机,对于点点ui问题就没必要太纠结了。。。怕你会疯)。

生命周期的注意:下面图片里的两个数组,它们的作用域都是本页面,但是它们的生命周期是不同的。
dataList1的生命周期同小程序的生命周期,也就意味着你每次退出页面时,要在onUnload: function () {}函数中使之置空,要不会有数据的叠加发生(对于像BOOL值的判断也需注意)。dataList2的生命周期同本页的生命周期,所以不需要手动管理。全局属性或函数,请在app.js里申明,配合var app = getApp()使用。

小程序现在的入口有:微信客户端
-发现-小程序;个人或群里分享(不支持盆友圈分享);扫码进入。

我们主要看看后面两种方法的实现,分享主要调用
onShareAppMessage函数,请看下面的截图。

这里要特别注意两点:在我们的小程序未上线时,一次最多只支持
5个链接的使用。在使用链接生成二维码之前,要先去后台-设置-开发设置-服务器域名-request合法域名里,配置好链接域名。如果你的链接是带参数的,那么一定要注意,生成二维码时参数也必须一样。当我们的小程序上线后,就没有这么多限制了,只需设置规则及功能页面就可以了,这也就意味着我们
线上版生成的二维码里的参数可以随便改,达到扫不同的二维码,进入的界面里的数据都不一样的效果

好了,转发及二维码的生成我们都会了,现在来看看怎么在程序中怎么接收这些参数,然后去使用(看下图):

注意点:在
onLoad函数中设置参数(options,自定义)接收,二维码链接内容会以
参数
q
(只能用
q去接收)的
形式带给页面,在
onLoad事件中提取"q"参数并自行UrlDecode一次
,即可获取原二维码的完整内容。

工具类的使用:常用的方法可以放在
util.js里面,方便管理和使用。例如调用里面的网络请求方法:

var request = require('../../../utils/util.js');

request.httpsGetRequest(url, dic, function (success) { });

module.exports = {

formatTime: formatTime,

getWindowWidth: getWindowWidth,

getWindowHeight: getWindowHeight,

showStyle: showStyle,

useScanCode: useScanCode,

httpsGetRequest: httpsGetRequest,

httpsPostRequest: httpsPostRequest

}

function getWindowWidth() {

var num = 0

wx.getSystemInfo({

success: function (res) {

num = res.windowWidth

}

})

return num;

function showStyle(title, content) {

console.log('showStyle')

wx.showModal({

title: title,

content: content,

success: function (res) {

if (res.confirm) {

console.log('用户点击确定')

} else {

console.log('用户点击取消')

//GET请求

function httpsGetRequest(req_url, req_obj, res_func) {

var jsonUrl = {

url: req_url,

header: { "Content-Type": "application/json" },

method: "GET",

success: function (res) {

typeof res_func == "function" && res_func(res.data);

}

}

if (req_obj) {

jsonUrl.data = req_obj;

wx.request(jsonUrl);

想要学习前端开发的同学,可以加群:
543627393 学习哦!