小程序开发踩坑记——初识小程序

前言

暑假期间做了一个小程序，一个专属于我们学校学生的小程序。这也算我自从学习前端以来第一次自己独立前后端兼顾开发的项目了。由于当初给自己立的flag是在8月22日之前完成，正好今天将最后一些小bug给修复了，然后已经上交审核了。暑假的剩下几天时间，打算把小程序开发过程中的一些心得体会写下来，也算为以后自己的开发提供一些帮助。

初识小程序

之前是从vue开始接触的前端，由于学校的项目custed用的就是vue框架开发的，因此vue用的比较多。但是从vue转手到小程序，跨度并不是很大，稍微看一下官方提供的文档就可以大致了解开发过程。

Vue与微信小程序的区别

我只是一个小白，也不敢说对vue或者微信小程序有多大的理解，这里只是在我的理解范围下的一些区别。

• vue开发页面，通常情况下在一个.vue文件进行，一个vue文件即可写一个界面；而微信小程序则是由四个文件组成的一个集体共同为一个页面服务，其中四个文件分别为：WXML、WXSS、JS（现改成WXS）、JSON。虽然在vue开发里并没有见过什么WXML、WXSS、WXS，但其实，微信官方只是改了个名字，然后稍微改了一些语法而已。其中WXML对应着HTML，WXSS对应着CSS，WXS对应着JS，完全可以按照之前学习VUE的习惯编写，只不过稍微注意一下微信小程序的改变就行。

   

WXML部分（HTML）

WXML语法参考

• 在微信小程序里，不再依靠div标签，取而代之的是view标签，用法当然跟div一样，可以简单理解成：微信小程序用view标签取代了div标签。其实用法应该都是一样的，形成的标签都是默认为块级元素，也是双标签，支持标签嵌套。
• 标签内容支持数据绑定。这一点与vue很像，vue的html部分也是支持数据绑定的，甚至用法都是很相似的，官网这里介绍的比较清楚，博客里就不详述了，贴上官网链接：WXML语法参考，如果链接失效的话，直接去微信小程序的开发文档搜索即可。

WXSS部分（CSS）

WXSS语法参考

• 借用官网的话：

  为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

• WXSS主要扩展了两个方面：尺寸单位，样式导入。（其实与Vue相比，只有拓展了第一个方面）

• 尺寸单位：rpx（responsive pixel）。可以根据屏幕宽度进行自适应。

  1.rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案。

  2.微信小程序的这个rpx，用起来还是十分舒服的。几乎不需要再去考虑不同设备的兼容问题了，该单位支持自适应。

  3.使用vue开发移动端的时候，通常会以iPhone6的分辨率作为基准。同理，使用小程序也可以使用iPhone6作为基准，但它也可以自适应其它设备。

  4.设计稿也建议使用iPhone6作为基准，iPhone6的分辨率（750x1334px）为基准。这样的情况下1rpx=1px。

  5.当然在实际开发过程中，很多地方是不适合用rpx这样的弹性单位的，微信小程序也考虑到了这一点，因此，css其它的单位例如px也是可以使用的。根据所需选择适合的尺寸单位即可。

WXS部分（JS）

WXS语法参考

我刚开始接触微信小程序的时候，WXS还没有出来，当时标注的还是JS。看到官网的一段话，觉得应该引用过来。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

腾讯，大家当然也知道，这里就不用多说，大家尽管当作js使用就好。需要提醒的是 ，遇到不会的地方，记得用js作为关键词搜，别用wxs！

JS部分页面结构（特指script标签部分）

注册界面

1.注册页面这部分，微信小程序跟Vue就十分相似，但是也有一些需要注意的点，稍有不注意，就会发生意料之外的坑。

2.Vue的页面数据放在data函数里的return返回值中。而小程序则是将页面数据放在了data对象内。

3.Vue里的函数（方法）需要写在与data函数平级的methods对象中，而小程序则不存在这个限制，自定义的函数（方法）与data对象平级。

4.生命周期：vue中的生命周期重要性不容多说，微信小程序也是有生命周期的。微信小程序中存在两个生命周期，一个是页面生命周期，一个是组件生命周期。

4.1 页面生命周期用的也就是用得最多的，放在页面四个文件WXS（JS）文件里的。

4.2 组件生命周期貌似也是最近才出来的东西，用的不多，这里就不多介绍。不过单看生命周期部分，和vue的相似度高一点。贴上官网：组件生命周期

5.APP部分：vue里面也是有app部分的，app.vue在vue的用处可是很大的。但是微信小程序却只有app.wxss、app.json、app.js。是的，少了一个app.wxml，简言之，不能像vue一样把所有界面共存的部分放在app文件里了。当然，这个只是不能放html共有的部分，像js共有的部分，在app.js还是可以共同使用的。

6.app.js(注册小程序)：小程序的注册过程差不多都在这里了，一些小程序创建的生命周期这里就不过多介绍，官网写得十分清楚。这里需要强调的是，app.js里通常会放上一些全局数据，用于各个界面的之间的数据交互。而在小程序里，被推荐的用法是：在onLaunch生命周期函数中写上this.globalData；具体形式如下：

1
//app.js
2
App({
3
  onLaunch: function () {
4
   // 全局数据
5
    this.globalData = {
6
        num:1212,
7
    }
8
  }
9
})

同时，如果在其他界面需要调用全局数据的话，则需要在其他页面的js部分填上一行：const app = getApp()，专业术语称之为：获取到小程序全局唯一的 App 实例。；具体形式如下：

​x
1
// pages/index/index.js
2
const app = getApp();
3
​
4
Page({
5
​
6
  /**
7
   * 页面的初始数据
8
   */
9
  data: {
10
    // 在data里，可以直接用全局数据给页面数据赋值
11
    num: app.globalData.num,
12
  },
13
  /**
14
   * 给全局数据赋值
15
   */
16
  fun1: funtion(){ // 当然也可以直接写成fun1(){}
17
    let number = 12;
18
    app.globalDate.num = number;
19
  }
20
})

7.模块化： 微信小程序更推荐的是使用模块化编程，这一点与Vue又不相而遇。

模块化这部分官网说得很清楚，这里就不过多介绍，贴上官网相应部分链接：模块化

JSON部分

2019年8月23日上午10:30补上

JSON主要是对页面进行配置，主要分为两部分：全局配置，页面配置。

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

可配置项有很多，官网写得很详细，这里不一一介绍，这里只介绍一些常用的配置。

Pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

示例如下：

需要注意的是，pages数组的最后一项结尾不允许加上逗号，否则会报错。

11
1
// app.json
2
{
3
  "pages": [
4
    "pages/index/index",
5
    "pages/userConsole/userConsole",
6
    "pages/openapi/openapi",
7
    "pages/openapi/serverapi/serverapi",
8
    "pages/openapi/callback/callback",
9
    "pages/openapi/cloudid/cloudid"
10
  ]
11
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

使用示例如下：

8
1
  // app.json
2
  "window": {
3
    "backgroundColor": "#F6F6F6",
4
    "backgroundTextStyle": "light",
5
    "navigationBarBackgroundColor": "#F6F6F6",
6
    "navigationBarTitleText": "云开发 QuickStart",
7
    "navigationBarTextStyle": "black"
8
  },

tabbar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

其中list数组的属性具体如下：

在界面上的布局如下：

更多的去小程序文档查看吧，再次贴上链接：全局配置

页面配置

贴上官网链接：页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

在页面进行的配置，可以覆盖掉app.json的window相同的配置，即对页面进行个性化处理。例如可以更改页面的导航栏样式与全局不同；仅在当前页面开启下拉刷新等操作。

属性设置大致与全局配置相同，这里就不过多介绍。

这里需要声明的是自定义组件

页面配置里含有一个属性是：usingComponents 全局配置里也有一个。通常情况下，如果引入的自定义组件需要在全局使用的时候，就直接在全局配置的usingComponents配置即可。若仅当前页面使用，也可在页面配置下配置。配置示例如下：

8
1
// app.json (页面配置类似)
2
{
3
 "usingComponents": {
4
    "cu-custom": "/colorui/components/cu-custom",
5
    "van-popup": "/dist/popup/index",
6
    "van-datetime-picker": "/dist/datetime-picker/index"
7
  },
8
}

页面数据

按道理说这应该属于WXS部分，但是由于在这个地方的坑太多了，所以单独作为一部分重点说明。

给页面数据赋值：

在vue里，赋值的话，直接使用this调用当前实例，后面跟的数据即是该页面定义的数据，例如：

19
1
// page1.vue
2
<script>
3
  export default {
4
    name: 'page1',
5
    data() {
6
      return {
7
        index: 6,
8
      }
9
    },
10
    methods:{
11
        fun1(){
12
            // 调用页面数据给num赋值
13
            let num = this.index;               // num变成了6
14
            let num2 = 10;
15
            this.index = num2;                  // index变成了10
16
        }
17
    }
18
  }
19
</script>

在微信小程序中，赋值的话变得相对麻烦了点，示例如下：

39
1
// pages/index/index.js
2
Page({
3
  /**
4
   * 页面的初始数据
5
   */
6
  data: {
7
    num: 10,
8
    str: 'Hello World',
9
    obj: {
10
        name: "chenmo",
11
        age: 12,
12
    },
13
    arr1: ['1','2','3'],
14
  },
15
  /**
16
   * 页面数据
17
   */
18
  fun1: funtion(){ 
19
    // 调用页面数据
20
    let number = this.data.num;   // num:10
21
    
22
    // 给页面数据赋值       // 务必记住不可直接赋值，否则会报错
23
    this.setData({
24
        num: 12,          // 逗号，不能用分号，setData为微信官方的函数，参数为对象
25
        str: "hello world",
26
        ['obj.name']: "chenmo1212", // 给对象赋值
27
    })
28
    
29
    // 给数组元素赋值
30
    let index = 0;        // index是个变量
31
    let item1 = 'arr1[' + index + ']';
32
    let item2 = 'arr1[1]';
33
    this.setData({
34
      [item1]: 3, // 数组赋值
35
      [item2]: 4, // 数组赋值
36
    })
37
    // 最后结果为:arr1: ['3','4','3']
38
  }
39
})