微信小程序开发实践

版权声明：本文为博主原创文章，未经博主允许不得转载。 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 模板：页面渲染

小程序组件
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交互逻辑

小程序API
WXML事件

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'
    })
  }
})

效果：