版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38208401/article/details/80627794
1、微信小程序项目结构
│pages
│ │index
│ │ index.js # 页面逻辑
│ │ index.wxml # 页面渲染
│ │ index.wxss # 页面样式
│ │test
│ │ test.js
│ │ test.json # 页面配置
│ │ test.wxml
│ │ test.wxss
│utils # 公用方法模块
│ util.js
│app.js # 全局逻辑
│app.json # 全局配置(页面路径、窗口表现、设置网络超时时间、设置多tab、是否开启Debug)
│app.wxss # 公共样式表
│project.config.json # 工具配置
2、app.json
小程序全局配置(页面路径、窗口表现、设置网络超时时间、设置多tab、是否开启Debug)
{
"pages":[
"pages/index/index",
"pages/test/test"
],
"window":{
"navigationBarTitleText": "小试开发微信小程序",
"navigationBarBackgroundColor": "#000000"
},
"tabBar": {
"backgroundColor": "black",
"color": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "swiper"
},
{
"pagePath": "pages/test/test",
"text": "test"
}]
}
}
- pages:小程序所有页面路径,为了让微信客户端知道小程序页面的目录
- window:设置小程序的状态栏、导航条、标题、窗口背景色
- tabBar:设置底部 tab
- networkTimeout:设置网络超时时间
- debug:设置是否开启 debug 模式
注:test.json:单个页面配置,只支持windows,会覆盖app.json同样的配置项
{
"navigationBarTitleText": "test",
"navigationBarBackgroundColor": "#FF0000"
}
3、WXML 模板:页面渲染
<swiper autoplay="{{autoplay}}" interval="{{interval}}" >
<block wx:for="{{imgUrls}}" >
<swiper-item>
<image src="{{item}}" class="swiper-image" bindtap="clickbaidu" />
</swiper-item>
</block>
</swiper>
<view wx:for="{{list}}" wx:key="arealist">
<view>{{item.id}},{{item.name}}</view>
</view>
格式同HTML,不同处:
- 标签名
- wx:if 属性及 {{ }} 表达式
4、WXSS样式:组件样式
.swiper-image {
height: 100%;
width: 100%
}
5、js交互逻辑
Page({
data: {
imgUrls: [
"http://v.leleketang.com/dat/ps/la/k/thumb/25052.jpg",
"http://v.leleketang.com/dat/ps/ma/k/thumb/24695.jpg",
"http://v.leleketang.com/dat/ps/la/k/thumb/25067.jpg"
],
autoplay: true,
interval: 3000,
},
onLoad: function () {
var that = this
wx.request({
url: 'https://www.leleketang.com/uc/ajax/area_get.php?id=110100',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
console
that.setData({
list: res.data.data,
})
}
})
},
clickbaidu: function(){
wx.switchTab({
url: '../test/test'
})
}
})
效果: