Miloer の 闲言碎语

我的微信小程序入门踩坑之旅

发表于


前言

小程序出来也有一段日子了，刚出来时也留意了一下。不过赶上生病，加上公司里也有别的事，主要是自己犯懒，就一直没做。这星期一，赶紧趁着这股热乎劲，也不是很忙，终于磨磨唧唧的写了个小demo，（当然还有好多接口没有使用）。

预计阅读时间：5min

正文

介绍

小程序的框架，挺像Vue的。

wxml

1
2
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}
// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello WeChat!
当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到对应的事件处理函数
逻辑层执行了 setData 的操作，将 name 从 WeChat 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA!

工具： 微信 web 开发者工具
我一般在这里只预览效果用。

app.json

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

改变pages里配置，会更改启动程序时的主页面。
window是设置页面的窗口表现，包括状态栏，导航栏颜色 等等。
tarbar是底部tab栏的表现。
官方还有 networkTimeout和 debug选项，在这里没有配置。
networkTimeout可以设置各种网络请求的超时时间。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
   {
    "pages": [
        "pages/index/other",
        "pages/other/index",
        "pages/logs/logs",
        "pages/login/login",
        "pages/douban/douban",
        "pages/douban/user",
        "pages/other/comment"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#3CB371",
        "navigationBarTitleText": "Ed Glayxe",
        "navigationBarTextStyle": "light",
        "backgroundColor": "#3CB371"
    },
    "tabBar": {
        "list": [{
            "pagePath": "pages/index/index",
            "text": "我的",
            "iconPath": "images/tabList/my_a.png",
            "selectedIconPath": "images/tabList/my_b.png"
        }, {
            "pagePath": "pages/logs/logs",
            "text": "日志",
            "iconPath": "images/tabList/log_a.png",
            "selectedIconPath": "images/tabList/log_b.png"
        }, {
            "pagePath": "pages/other/other",
            "text": "段子",
            "iconPath": "images/tabList/joke_a.png",
            "selectedIconPath": "images/tabList/joke_b.png"
        }, {
            "pagePath": "pages/login/login",
            "text": "登录",
            "iconPath": "images/tabList/Login_a.png",
            "selectedIconPath": "images/tabList/Login_b.png"
        }, {
            "pagePath": "pages/douban/douban",
            "text": "用户列表",
            "iconPath": "images/tabList/user_a.png",
            "selectedIconPath": "images/tabList/user_b.png"
        }]
    }
}

页面文件

app.js、app.json、app.wxss这三个文件是必不可少的文件。.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。这些都是公共文件。
在我的wxss里引入了weui的wxss 有的页面使用了它的UI。

Pages 里面是对应的页面。每个对应的页面里都有 相应的js wxml wxss文件。对文件进行配置。

在common文件夹了 写了一个评论template 尝试了一下引入模板。
在utils里封装了一下内部的方法。

问题

在小程序里支持flex布局，还是挺不错的。
我有时布局的时候都给写个html文件，在浏览器里看看样式。然后照搬到微信小程序里。但是我写的页面并不复杂。并不能完全的发现更多的不同。
在小程序里试图层为view ，但它并不像div一样，view 和text在一起会重叠。我觉得相当于 div和span。
还有一些CSS样式并不支持。

数据渲染：

这个用flex布局写的，页面比较简单。

我记得昨天有个东西我找了好久，就是
“enablePullDownRefresh”: true。允许用户下拉。
一开始我以为这是自己写的。这是配置在json文件里。官方的文件几乎没怎么看。。然后就尴尬了。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var util = require("../../utils/util.js");
var app = getApp();
Page({
    data: {
        textDataList: [],
        tempid: 0,
        lastid: 0
    },
    onLoad: function() {
        util.alertLoading('数据加载中', 2000);
        this.loadData();
    },
    refreshData: function() {
        util.alertLoading('刷新中', 2000);
        this.loadData();
    },
    loadData: function() {
        var that = this;
        var url = 'http://api.budejie.com/api/api_open.php';
        var requireData = { a: 'list', c: 'data', type: '29' };
        util.request(url, requireData, function(res) {
            var newData = res.data;
            that.setData({
                textDataList: newData.list,
                tempid: newData.list[0].id
            })
            console.log(that.data.tempid);
        })
    },
    onReachBottom: function() {
        util.alertLoading("加载中!", 2000);
        console.log("加载这个没做 = =！");
    },
    onPullDownRefresh: function() {
        util.alertLoading("刷新中！", 1000);
        var that = this;
        var url = 'http://api.budejie.com/api/api_open.php';
        var requireData = { a: 'list', c: 'data', type: '29' };
        util.request(url, requireData, function(res) {
            var newData = res.data;
            that.setData({
                textDataList: newData.list,
                lastid: newData.list[0].id
            })
            console.log(that.data.lastid);
        });
        if (this.data.lastid === this.data.tempid) {
            util.alertSuccess("已经是最新了", 1000);
        }
    }
})

微信小程序思维导图（来源于网络）

后续

快下班了，其实写之前我想写的更详细一点，但更多的介绍我想没有比官方更清楚的。

我觉得最好的学习方式就是撸一遍代码，比看10个demo有用的多。

时间仓促，页面很简单。也希望把你的demo分享给我互相学习。感谢你的阅读，

Bye。

项目地址： https://github.com/miloers/WxSmall