微信小程式開發準備

第一步：申請小程式賬號（微信公眾平臺）
第二步：下載微信開發者工具（微信公眾平臺點選文件、小程式開發、下載） 

開發語言

javascript、html等

基本語法： 

1.view標籤相當於div：多個view標籤自動換行顯示
2.text標籤：多個text標籤一行顯示
3.button標籤:按鈕
4.swiper標籤：輪播圖可以實現圖片的輪播 

小程式製作：

 1.index.js: 

Page({
  data: {
    imgUrls: [
      '/圖片/0c46df96a46b1efadd31cfc2f397638e.jpg',//圖片的相對位置
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'//圖片的地址
    ],//可在微信小程式開發平臺中獲取相關程式碼，輔助index.wxml使用（實現輪播圖的功能）
    indicatorDots: true,
    autoplay: true,//自動播放
    interval: 2000,//圖片播放間隔（2s）
    duration: 1000,//每張圖片播放的時間（1s）
    circular: true,//迴圈播放圖片
    prolist:[{//創立一個列表，用來實現多張圖片的插入，用迴圈來輔助實現（在index.wxml中）
      proname:"name1",
      proprice:10,
    }, {
        proname: "name2",
        proprice: 20,
      }, {
        proname: "name3",
        proprice: 30,
      }, {
        proname: "name4",
        proprice: 40,
      }, {
        proname: "name5",
        proprice: 50,
      }, {
        proname: "name6",
        proprice: 60,
      },
    ]
  }
})
 

2.index.wxml 

<wxs module = "filters" src="index.wxs"></wxs>//連結index.wxs
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}'>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>//在微信小程式中複製程式碼，輔助index.wxml使用,實現輪播圖的功能實現
<view class = "content">
  <view class = 'pro' wx:for="{{prolist}}">//迴圈列表prolist
    <image src='/圖片/0c46df96a46b1efadd31cfc2f397638e.jpg'></image>
    <view class='proname'>{{item.proname}}</view>//內容為列表中proname的內容
    <view class='proprice'>$ {{filters.toFix(item.proprice,2)}}</view>//呼叫模組實現保留幾位小數的功能，內容為列表中prorice的內容，其中$原樣輸出
  </view>
</view>
 

3.index.wxs 

var filters = {
  toFix : function(val,count){
    return val.toFixed(count)
  }
}
module.exports = {
  toFix : filters.toFix
} 
//實現保留幾位小數的功能實現，輔助index.wxml使用

4.index.wxss

swiper,swiper image{//整個輪播圖和輪播圖片實現寬度和高度的定義
  width: 100%;
  height: 500rpx;
}
.content{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;//用來實現其中的內容不緊鄰，周圍有空白
  margin-top: 20rpx;//實現整個框架的頂外邊距頂端與上一個的距離
}
.pro{
  width:30%;
  margin-bottom: 10rpx;//實現外邊距底部與下一個的距離
}
.pro image{
  width:100%;
  height: 200rpx;
}
.proprice{
  color: yellow;
}
 

5.app.json 

//該程式碼用來實現底部選單功能
{
  "pages":[
    "pages/index/index",
    "pages/cart/cart",//第二個按鈕（名字隨意取）
    "pages/user/user"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "00B26A",//視窗欄頂部的顏色（可用顏色提取器來提取）
    "navigationBarTitleText": "商城",//視窗欄頂部的名字
    "navigationBarTextStyle":"white"//視窗欄文字的顏色
  },
  //以下為按鈕的操作
  "tabBar":{
    "list":[{
      "pagePath":"pages/index/index",//按鈕連線的位置
      "text":"text1",//按紐顯示的名字
      "iconPath":"/圖片/1.png",//按鈕未點選顯示的圖片
      "selectedIconPath":"/圖片//3.png"//按鈕點選後顯示的圖片
    },{//按鈕圖片必須為.png的形式，且大小有要求
    "pagePath": "pages/cart/cart",
    "text": "text2",
    "iconPath": "/圖片/3.png",
    "selectedIconPath": "/圖片/1.png"
  },{
  "pagePath": "pages/user/user",
  "text": "text3",
  "iconPath": "/圖片/3.png",
  "selectedIconPath": "/圖片/1.png"
  }]
  }
}

6.app.json

/**app.wxss**/
//用來設定微信小程式的一些基本操作
page{
  color: blue;
  font-size: 28rpx;
  font-family: microsoft yahei;//字型的選擇
}

效果展示