|
微信的小程序已经推出了，相继的教程也有。官方网页推出API和接口说明，目前来讲暂时足够。
可以进入该链接查看。微信官网
今天尝试一下下载该web的开发工具，从目前来讲，使用了一个下午。目前版本给人的感觉还有待继续提升的恐惧。从编码的体验来讲，对一个重度用户来讲并不算太好用。但足够对付一个轻量级的程序。在调试的过程，由于经常切换显得不是太舒服。
1.注意项目路径
由于第一次初始的时候，下载的demo，由于没有注意app.json的放置的文件夹位置，导致了多了一层，导致老是报一个错误。经同事指点后，将文件和项目文件夹放置同一级处，这样就可以顺利调试到。由于appid申请不到，在公众号那里需要公测，因此只能有限制使用。
一个下午经过调试了一下临时搭建了一个没有功能的界面。
2.使用组件
微信这里提供了很多组件，这个和之前的微信样式有点类似。通过组件的组合可以拼接一些界面使用。这个有点像css那样，据官方说wxss文件和css有点相似，区别和限制。
配置一个Tabbar，一个Tabbar最多是5个，相应的字段需要对其进行配置，提供了图片，点击的关联的页面。选择的图标状态。
官方的代码如下：
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "我的"
}]
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
使用视图，图片，文本，按钮
<view class="card">
<view class="shopitem">
<image class="shopimg" src="http://img12.360buyimg.com/n5/jfs/t1174/338/865120803/45181/e564982f/5563cb4cNa42cf32c.jpg"></image>
<text class="title">小米充电宝</text>
<text class="price">$69元</text>
<button class="buy" type="primary">购买</button>
</view>
</view>
按钮提供了一些使用的样式类型。
3.使用页面
创建Tabbar按钮，需要关联一些页面，页面的命名方式需要保持一致。 如文件夹为index，里面js wxml 和wxss保持 前缀一样。 index.js index.wxml index.wxss
切换页面的时候，可以在js里面控制一些行为。下面可以看到，通过app来获取用户的基本信息。
定义数据
data: {
motto: 'Hello World',
userInfo: {}//用户的基本信息，微信用户的信息
},
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
app.getUserInfo(function(userInfo){
that.setData({
userInfo:userInfo
})
})
}
})
-
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
-
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
数据绑定
通过加载的数据，获取到了用户的基本信息userInfo。通过数据绑定来显示微信的头像和名字。
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
4.新建多一页面
编辑器里面新增一个页面，并且在app.json里面配置多一页面，把相应的页面配置一下。 在pages里面进行配置新增多一页面。并在tabBar里面新增一个选项指向我们刚创建的页面。
邀请
原作者: 模板之家
来自: 网络收集
| 
