小程序开发简介 mini-program

小程序前端的开发和简单的Vue的开发比较相似，可以在每个页面定义一个ViewModel。而原生小程序的开发和简单的Vue也有一些区别，例如小程序有一个全局的应用实例以及路由管理，而这是简单的Vue没有的。同时原生小程序自带了例如网络请求等功能，而Vue需要引入网络请求等的库。总体来说原生小程序的开发是很好上手的，不过在开发过程中也遇到了一些坑，这里简单记录一下在开发过程中遇到的问题。
【小程序开发简介】

1、全局应用实例以及路由。
在各个实例中需要获得全局的应用实例时，只需要一行

var app = getApp();

即可得到。
而小程序首页，在app.json的pages属性中，第一行的路由即为小程序的显示的首页。

2、当数据发生改变时，小程序前端的页面渲染改变需要通过wx.setData的方式才可以实现，而不像Vue直接对data中的数据采用合适的方法进行修改就可以改变页面的渲染。
例如要将data的第i个数据移除，Vue的实现可以通过

this.$data.tables.splice(i, 1);

即可改变页面的渲染。
而这样对于原生小程序是无法改变页面渲染的，需要以下实现才可以改变页面的渲染。

let newTable = this.data.tables; newTable.splice(i, 1); this.setData({ tables: newTable })

3、原生小程序的wxml（类似HTML）的一些指令，和Vue有比较明显的区别。
在Vue中，条件渲染的指令是v-if或者v-show。而在原生的小程序中，对应的分别则是wx:if以及hidden，开始没有注意到hidden是没有wx:的，无论怎样都实现不了，后来才发现hidden是没有wx:的，修改之后才实现了功能。

4、wxml中点击的实现。
在Vue中实现一个Dom的点击事件，只需要v-on:click="function(params)"一条指令，而在原生小程序中，首先需要bindtap="function"，而参数需要data-paramname="{{param}}"，然后在ViewModel中function，同时获取点击的状态，从中读取data-paramname的数据才可以得到需要的参数。
wxml：

js：