伤不起的微信小程序

 

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

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);
想要学习前端开发的同学，可以加群：434623999 学习哦！

转载于:https://www.cnblogs.com/CCDS01/p/8145393.html