微信小程序开发：实践始终比想象容易

微信小程序

微信小程序已经出来很长时间了，很久之前就想鼓捣小程序，当初认为所有程序都类似，写起来应该很容易，但等看完微信小程序的开发文档，看上去跟平常的代码完全不同，微信小程序有着一套独立的架构，随后，每当一看到小程序文档那些英文字母就头大，过不了几秒钟就放弃了，然后一直认为学起来很费劲。就在偶然的一次机会，实践了一小下，发现并没有想象的那么难。

一、初入微信小程序，认识它的外貌

相信当你决定开发微信小程序后，微信开发者工具肯定已经下载好了，但新建项目之后可能会发现自动建立的那些文件，跟平常不一样，看里边的代码也不一样，就有可能会有放弃的念头，但实际上大可不必，你可以建立一个最简单的项目，实际项目的根目录只会包含1个文件（project.config.json），而该文件中的内容可以不用管。刚开始先来看一个简单的目录结构图。

/tmp/phpa5tGo3

二、进阶

由上图可知，一般分为4种类型的文件，json可以认为是配置文件，wxml可以认为是类似html的模板文件，wxss看样子也可以当作是css文件，js文件不用多说也可以知道是存放js脚本的文件。

这里主要需要先配置一下根目录的app.json文件，它决定了页面结构和页面标题等相关属性，下面单独把代码拿出来自己就以轻而易举的了解到了。

  1. {
  2.   "pages": [
  3.     "pages/index/index"
  4.   ],
  5.   "window": {
  6.     "navigationBarTextStyle": "black",
  7.     "navigationBarTitleText": "小程序标题",
  8.     "navigationBarBackgroundColor": "#fbf9fe",
  9.     "backgroundColor": "#fbf9fe"
  10.   },
  11.   "debug": true
  12. }

三、WXML解析

在上一步当保存之后就会发现项目多出来了pages/index/这样的目录结构，这是因为app.json中的配置的原因，其中index.js、index.json、index.wxml、index.wxss是一套，都以index命名，其中.wxml文件上面也说过了实际就是个html模板文件，主要用来编写页面布局的，而编写布局的代码，可以在微信小程序官方文档中找到，当然，如果想省事，可以直接百度搜索关键词“微信小程序+空格+任意想搜索的关键词”即可。这里最主要的标签就属<view>了，刚开始你可以只写一个<view>Hello World!</view>用来测试。

四、WXSS解析

index.wxss文件其实刚开始也用不到，完全可以在上一步中index.wxml的view中添加style属性进行添加css样式即可。

五、JS解析

接下来就是index.js文件了，而要想做出比较好的微信小程序出来，最主要的还是js的编写，而这里的js代码和一般web中的js代码略有不同，其js语法可以在微信小程序官方文档中找到，同样可百度。

这里主要举例出类似ajax的网络请求的语法结构的写法：

  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     indicatorDots: true,
  8.     autoplay: true,
  9.     interval: 5000,
  10.     duration: 1000,
  11.     list: []
  12.   },
  14.   /**
  15.    * 生命周期函数--监听页面加载
  16.    */
  17.   onLoad: function (options) {
  18.     var that = this;
  19.     wx.request({
  20.       url: CONFIG.dev.api.url,
  21.       method: 'POST',
  22.       data: {
  23.         page: 0,
  24.         cid: 12
  25.       },
  26.       datatype:"json",
  27.       header: {
  28.         "Content-Type": "application/x-www-form-urlencoded"
  29.       },
  30.       success: function (res) {
  31.         console.log(res);
  32.         if (res.statusCode == 200) {
  33.           var list = [];
  34.           that.setData({ list: res.data });
  35.         } 
  36.       }
  37.     })
  38.   },
  40.   /**
  41.    * 生命周期函数--监听页面显示
  42.    */
  43.   onShow: function () {
  44.     //在页面展示之后先获取一次数据
  45.   },
  47.   /**
  48.    * 生命周期函数--监听页面初次渲染完成
  49.    */
  50.   onReady: function () {
  52.   },
  54.   /**
  55.    * 生命周期函数--监听页面隐藏
  56.    */
  57.   onHide: function () {
  59.   },
  61.   /**
  62.    * 生命周期函数--监听页面卸载
  63.    */
  64.   onUnload: function () {
  66.   },
  68.   /**
  69.    * 页面相关事件处理函数--监听用户下拉动作
  70.    */
  71.   onPullDownRefresh: function () {
  73.   },
  75.   /**
  76.    * 页面上拉触底事件的处理函数
  77.    */
  78.   onReachBottom: function () {
  80.   },
  82.   /**
  83.    * 用户点击右上角分享
  84.    */
  85.   onShareAppMessage: function () {
  86.     // return custom share data when user share.
  87.     console.log('onShareAppMessage')
  88.     return {
  89.       title: '页面标题',
  90.       desc: '页面描述',
  91.       path: '/pages/index/index'
  92.     }
  93.   }
  94. })

这里需要注意的有2点：

1、Page函数中data的值可以直接传递到wxml中去，需要用到this.setData({ key: value })的形式进行传递；

2、在使用wx.request进行网络请求时，如果返回json的话，需要传递一个值为"Content-Type": "application/x-www-form-urlencoded"的头文件header。

3、随后，在index.wxml中获得数据的时候，使用{{key}}的形式进行显示数据，比如：{{list}}。

六、到此，一个简单的微信小程序就完成了，如果小程序中有用到包含js文件等需求，可以使用require函数进行包含操作，也可适当添加images、utils等静态文件夹。

如果全部完成就可以在测试、体验后进行上传审核、发布微信小程序了。

综上所述：微信小程序的开发，实践始终比想象容易，不管干什么事，最怕的就是不动手，永远考脑子去想，就算脑子无比聪明，但俗话讲，好脑子不如烂笔头，再聪明也装不下程序般复杂的逻辑，感觉微信小程序难就是必然的了，只要勤动手，实践一下，你就会发现再难的事也会迎刃而解。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注