推荐下载
-
2020-05-12 浏览：773
-
2020-04-04 浏览：612
-
2020-05-06 浏览：549
-
2020-05-08 浏览：538
-
2020-05-12 浏览：534
Moustache：我的微信小程序入门踩坑之旅
发布时间:2020-12-11小程序出来也有一段日子了，刚出来时也留意了一下。不过赶上生病，加上公司里也有别的事，主要是自己犯懒，就一直没做。这星期一，赶紧趁着这股热乎劲，也不是很忙，终于磨磨唧唧的写了个小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.jsonapp.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里封装了一下内部的方法。
问题