微信小程序开发

首先假设你的所有准备工作都已就绪。

我们直接开始：

1.设计稿

微信小程序官方单位是rpx,它可以自适应屏幕，这里推荐使用宽度为750px的设计稿，这样在开发过程中，1px就等于1rpx。

2.页面

微信小程序是以wxml为视图容器的，新建的一个页面文件会包括四个文件，.js，.json,.wxss,.wxml,建议将每个页面都以一个单独的文件夹存放，

然后在文件夹内新建.wxml文件，其余三个文件会自动生成，微信开发者工具也会自动配置app.json文件。

3.样式

微信小程序的样式就是wxss文件,前面我提到过每个.wxml文件都有对应的.wxss文件，页面不需要做引入，开发者工具会自动检索（你的文件新建的没问题的情况下）

.wxss文件内部写法和css是一样的，这里就不多解释了

4. js

小程序的js文件和普通的js文件没有差别，只不过有固定的模版，我们来看看长啥样：

//获取应用实例

const app = getApp()

Page({

data: {

x:0,

y:0,

listData:[]

 

},

//事件处理函数

bindViewTap: function() {

 

},

onLoad: function () {

var listData = [{"name":"股票","pnum":"50000","mnum":"0"},

{ "name": "基金", "pnum": "3000", "mnum": "6000" },

{ "name": "固收", "pnum": "6000", "mnum": "12000" },

]

this.setData({

listData: listData

});

},

getUserInfo: function(e) {

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

},

onReady:function(){

},

bindupdated:function(){

 

},

//用户自定义事件开始

delTab:function(e){

var index = e.target.dataset.index;

var listData = this.data.listData;

listData.splice(index,1);

this.setData({

listData: listData,

x:0,

y:0

});

}

})

所有的小程序内置函数和用户自定义函数都写在page({})内部

用户通过给页面元素绑定对应的事件，比如：

<view class='del-btn' bindtap='delTab' data-index ="{{index}}" >删除</view>

对应上面的delTab函数，需要的参数以data-参数名的形式传递，js内部通过e.target.dataset.参数名的形式去获取。

 

对于小程序内置函数不清楚的建议大家去查看小程序的开发文档。

5.数据

小程序采用了当下热门的react.js为底层进行开发，也就决定了它的数据是采用数据绑定的形式来渲染数据的。

我们可以看到上面的js文件内部有一个data参数这里定义的参数都可以在页面上以｛｛参数名｝｝的形式拿到。那么问题来了。

如果不是单个数据而是数组或者json呢，哈哈，小程序的页面其本事就带数据处理功能，详情请移步小程序开发文档-----渲染列表。

好了说了数据的渲染，然后来说说数据的设值，数据设值一般都是使用setData()的形式设置，使用setData会引发页面的重构，也就是数据实时更新到页面。

 

6.全局变量

有时候我么一些数据是需要在各个页面之间通用的，这时候该怎么办呢。

小程序提供了一个全局的app对象,可以通过getApp()获得，app对象中有一个属性

globalData，可以以app.globalData.参数名 = 参数值的形式来设置全局变量。

以app.globalData.参数名的形式获取。

7.前后台交互

小程序提供了wx.request()方法来实现前后台交互，具体使用方法请移步官方开发文档。

到此小程序前台开发所需的技术已经罗列完了，欢迎大家指正。

*当然这里没有提到一些优化内容，包括了前端数据缓存，数据存储，具体解决方案视需求而定，官方文档中有对应的解决方案。