小程序模板网

Real--微信小程序开发之路(一)

发布时间:2018-04-18 10:27 所属栏目:小程序开发教程
作者:Real,来自原文地址

今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点。在开始之前先了解下微信小程序是个什么东西吧。

 

“微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。”

 

以上是百度百科中对微信小程序的定义。简单来讲,微信小程序是为了优化用户体验,相对于原生App来说它具有“用完即走,无需安装”的优点,而相对于传统网页来说又具有加载速度更快并且更安全的优点。总之,本人听喜欢小程序的,看好它。

好了,言归正传,拿好笔划重点咯~~~

 


 

一、微信小程序属单向绑定,而并非双向绑定

 

什么是单向绑定?什么是双向绑定?

单向绑定是MVVM框架中的一种数据处理模式,它是将Model(也就是数据层)中的数据绑定到View(也就是表现层),当JS中的数据发生改变时,View也会相应发生改变。而双向绑定则更加强大,当View中数据发生改变时,JS中的数据也会响应发生改变,一般是用在表单当中。

个人觉得微信小程序长得非常像最近特别火的前端框架Vue.js,Vue小而轻,用起来特别方便,而且很容易入门,属双向绑定。但是小程序虽然表面长得跟Vue很像,却只能单向绑定数据,Model改变View则跟着改变,View改变Model却不变。

那问题来了,有时候表单类控件内容发生改变时需要在Model中相应做出改变时怎么处理呢?

这个其实也不难,对小程序开发文档相对熟悉的应该知道,表单类控件一般都带有类似bindinput和bindchange之类的事件处理属性,这样就可以用这些属性绑定自定义函数来改变Model中的数据了。

 

二、不能通过this.key=value的方式来直接改变Model中的内容进而改变View

 

这也是小程序与Vue的区别之一。Vue可以直接通过this.key=value的方式直接改变View,而小程序只能通过this.setData({ key: value })的方式来改变View。但是需要注意的是,小程序当中也可以使用this.key=value,但是并不能改变Model,只是在Page对象中创建一个新的属性并赋值而已,一般可以通过此方式来实现Page对象属性之间的通信。简单举个栗子吧~~~

 

 

下面将继续分享我在开发小程序过程中所遇到的“坑”。

一、onLaunch方法只能在app.js中的App()中定义

这个其实熟悉文档的话就很好理解了,onLaunch方法只在小程序初始化完成时触发,全局只触发一次,所以在页面的Page()中写这玩意儿是无效的,当然也不会报错,这才导致新手容易犯错。

二、局部js文件若要调用app.js中的方法或获取其中的数据,可通过getApp()的方式来获取

首先需要强调的是,app.js虽然说可以定义全局方法或数据,但是在局部js文件中却无法直接调用。其次还需注意的是,在app.js中的全局方法必须要在App()中定义,否则无法在局部调用。简单举个栗子吧~~~

//app.js
App({
    b(){
        console.log("b");
    },
    globalData:{
        ccc: 'ccc'
    }
})

function a(){
    console.log('a');
}
//pages/test/test.js
var app = getApp();
Page({
  data:{},
  onLoad:function(options){
    // a();     // 报错
    // app.a();     // 报错
    app.b();     // b
    console.log(app.globalData.ccc);    // ccc
  }
})

其实这样也不难理解,我们通过getApp方法可以直接获取小程序实例,然后就能很开心的调用和获取App()中定义的方法和数据咯~~

三、若项目中需要使用登录接口wx.login(),在使用微信开发工具建项目时须填入AppID

四、支持JSON.stringigy()和JSON.parse()这两个方法,但需要注意的是,使用JSON.parse()时传入的参数必须是标准的JSON格式的字符串

刚开始以为小程序不支持JSON.parse()方法,因为在实际用的时候报错了,后来才发现原来是自己JS技术不过关。在使用该方法时,要特别注意传入的参数格式,举个例子:

// pages/test/test.js
var app = getApp();
Page({
  data:{},
  onLoad:function(options){
    console.log(JSON.stringify({aaa: 111}));   //  这个方法倒是可以传入普通的JS对象字面量,返回{"aaa":111},这是个字符串
    console.log(JSON.parse('{"aaa": 111}'));     //  标准的JSON格式的字符串,返回{aaa: 111},这是个对象
    // console.log(JSON.parse("{'aaa': 111}"));    //  报错
    // console.log(JSON.parse("{aaa: 111}"));      //  报错
  }
})

其实就是考验对这两个JS方法的掌握,跟小程序没啥关系,对这两个方法特别熟悉的可以直接跳过。

结后语:其实不管学什么,都不能仅仅只停留在理论,否则理论再好你也不一定掌握,学习的精髓其实在于多看、多练和多写。比如你看完本文,或许你觉得某个地方可能不太正确,这时候你就可以自己写个Demo试一试,最后你可能觉得这个知识点很好可又担心记不住,这时候你就应该把它写下来



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23651.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询