Content Table
2017-03-09

小程序 Tips

开发环境

腾讯官方提供的微信web开发者工具的编辑功能是至今见过最难用的编辑器之一，我们可以使用其他的编辑器例如 Atom，SublimeText 等编辑，保存后微信web开发者工具会自动的发现文件变化了，然后自动刷新小程序，看到修改后的效果。

创建页面

例如要创建一个课程的页面 course，不需要在小程序开发工具中手动的一个一个的创建目录和文件（很多教学视频里就是这么做的），只需要在 app.json 中的 pages 下加上页面注册的路径 **”pages/course/course”**，保存，然后小程序开发工具就会自动的创建所有相关的目录和文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "pages": [
        "pages/index/index",
      	
        // 添加下一行后，微信web开发者工具发现 app.json 变化了，会自动的创建
        //   course 目录
        //   course.wxml
        //   course.wxss
        //   course.js
        //   course.json 
        "pages/course/course"
    ],
    ...
}

URL 管理

为了集中管理 URL，把所有和服务器相关的 URL 都放到 /util/urls.js 里集中管理，然后需要使用的页面使用 require() 进行加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 文件名: /util/urls.js

var HOST = 'http://192.168.10.98:8080';

// [1] 集中定义 URL
var Urls = {
    REST_HOME:    HOST + '/rest/microapphome',
    REST_BANNERS: HOST + '/rest/banners',
};

// [2] 导出 URL 模块
module.exports = {
    Urls: Urls
};

在 pages/course/course 中使用 URL:

1
2
3
4
5
6
7
8
9
10
11
12
var Urls = require('../../utils/urls.js').Urls; // [3] 引入 URL 模块

Page({
    onLoad: function(options) {
        var self = this;
        wx.request({
            url: Urls.REST_HOME, // [4] 使用 URL
            success: function(response) {
            }
        });
    }
)};

Mock 数据

开发中可能后端还没有准备好，或者为了开发方便查看效果，可以使用假数据，放在 /util/mock.js，初始化时使用 mock 数据初始化，onLoad() 时发现是开发就不从服务器加载数据，如果是线上环境就从服务器加载数据，记得上线前修改为不使用 mock 数据，给一个开关进行修改就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 文件名: /util/mock.js

// 开发环境中的虚拟数据
var MOCK = {
    yes: true,
    course: {courseId: 1234, name: 'Hadoop 入门', instructor: 'Clapton'}
};

// 和 MOCK 中的数据一一对应
var EMPTY_MOCK = {
    yes: false,
    course: {}
};

module.exports = {
    Mock: Config.mock ? MOCK : EMPTY_MOCK
};

页面中使用 mock:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var Mock = require('../../utils/mock.js').Mock;
var Urls = require('../../utils/urls.js').Urls;

Page({
    data: {
        course: Mock.course // 先初始化为 Mock 里的 course
    },
    onLoad: function(options) {
      	// 如果是生产环境，则执行初始化请求 course，否则就使用 Mock 里的 course，
        // 这样不需要访问服务器也能看到页面的效果
        var x = Mock.yes ? '' : this.init(options);
    },
    init: function(options) {
        var self = this;
      	var courseId = options.courseId; // 生产环境环境时的 courseId 是页面链接传过来的

        wx.request({
            url: Util.formatString(Urls.REST_COURSES, {courseId: courseId}),
            success: function(response) {
                var result = response.data;

                if (result.success) {
                    self.setData({course: result.data});
                }
            }
        });
    }
}

清空 input

给 input 的 value 绑定一个变量，设置这个变量的值为空就可以实现清空 input 了:

1
2
3
4
<view class="input-box">
    <input value="{{newComment}}" bindinput="bindNewComment" placeholder="请输入评论……"/>
    <button bindtap="submitComment" type="default" plain="{{true}}">评论</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
App({
    data: {
        newComment: ''
    }
    // 把用户输入的评论保存到变量里
    bindNewComment: function(e) {
        this.data.newComment = e.detail.value; // 不更新 input，提高效率
    },
    submitComment: function() {
        // 提交到服务器
        wx.request({
            url: Urls.REST_COMMENTS,
            success: function(response) {
                this.setData({
                    newComment: '' // 清空 input
                });
            }
        });     
    },
});

路径

使用工程中的文件时，文件的路径有相对路径和绝对路径:

  • 相对路径:
    • 都可以使用相对路径，但是有时候当页面跳转了几次后，容易出错，所以尽量不要使用相对路径
    • wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wxml 中的 url，CSS 中图片的路径，require() 等引用工程中文件的路径都可以使用相对路径
  • 绝对路径:
    • 大多数时候都可以使用绝对路径，只有 require() 引用 js 文件时例外
    • 可以使用：wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wxml 中的 url，CSS 中图片引用工程中文件的路径都可以使用绝对路径，绝对路径以 / 开头，例如 /image/dog.png
    • 不可使用：require() 引用工程中的文件时只能使用相对路径，不能使用绝对路径