微信小程序入門

1. 開發工具：微信開發者工具
目錄結構：

app.js: 小程序公共邏輯
app.json: 小程序公共配置
app.wxss: 小程序公共樣式

2. 設置導航欄

"window": {
	 "navigationBarBackgroundColor":"#bc162c"
}

3. 添加底部菜單欄

"tabBar": {
    "backgroundColor": "#bc162c",
    "color": "#8a8a8a",
    "selectedColor": "#fff",
    "list": [
      {
        "selectedIconPath": "image/tab_home_select.png",
        "iconPath": "image/tab_home_select.png",
        "pagePath": "pages/home/home",
        "text": "首頁"
      },
      {
        "selectedIconPath": "image/tab_msg_select.png",
        "iconPath": "image/tab_msg_select.png",
        "pagePath": "pages/message/message",
        "text": "消息"
      },
      {
        "selectedIconPath": "image/tab_me_select.png",
        "iconPath": "image/tab_me_select.png",
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }

備註：app.json中pages應該和tabBar中list節點下邊的順序保持一致，否則可能導致tabBar按鈕不出現

"pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/my/my"
  ]

4.輪播圖組件：swiper
home.wxml頁面

<!--pages/home/home.wxml-->
<swiper indicator-dots="indicatorDots"
        indicator-color="#FFF"
        indicator-active-color = "#bc162c"
        autoplay="{{autoplay}}" 
        interval="{{interval}}" 
        duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>

home.js加入數據初始化：

data: {
    imgUrls: [
      '/image/index1.jpg',
      '/image/index2.jpg',
      '/image/index3.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }

home.wxss添加樣式

/* pages/home/home.wxss */
.slide-image{
  width: 100%;
  height: 300rpx;
}

樣式可稍微再調整一下，或者選用圖片比較好一些的，此處直接拉寬了

wx.setStorageSync（key,value）;本地緩存函數（對應get）

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
wx.navigateTo（url，success，fail，complete）

  toCase: function(res){
    // console.log(res);
    var index = res.target.dataset.index;
    wx.setStorageSync('detail_text', this.data.product_list_show[index].detail_text);
    wx.setStorageSync('detail_image', this.data.product_list_show[index].image);
    wx:wx.navigateTo({
      url: '/pages/detail/index?name=' + this.data.product_list_show[index].product_name,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

5. 地圖

1. map標籤，對應經緯度，加載地圖，手機上查看可拖動，加載更多，其它函數參開微信地圖開發文檔

<map id="myMap" longitude="108.9193904400" latitude="34.2057554210" ></map>

longitude：經度
latitude：維度
微信地圖開發文檔

2. 監聽頁面加載函數

wx.getLocation({
      success: function(res) {
        wx.openLocation({
          latitude: 34.2057554210,
          longitude: 108.9193904400,
          name: '頂秀金頤家園',
          address: '西安市雁塔區電子正街'
        })
      },
    })

可試用markers來標記點位置。

6. 撥打電話

calling: function() {
    wx.makePhoneCall({
      phoneNumber: '13820003496',
      success: function(){
        wx.showToast({
          title: '撥打電話成功',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function(){
        wx.showToast({
          title: '撥打電話失敗',
          duration: 2000
        })
      }
    })
  }

、
移動端直接跳到撥號盤

歡迎下方留言指出不足指出