微信小程序開發入門（一），Nodejs搭建本地服務器

1.  如何模擬真實環境中，讀取服務端數據，首先須要使用Nodejs搭建一個本地服務器的環境。

在搭建web服務器以前，須要先安裝node.js(安裝版本最好爲6.9.x)

安裝後node.js，接下來就須要安裝http的鏡像文件

npm install http-server -g(windows下)
sudo npm install http-server -g(linux和mac下)
接下來在桌面建立一個文件夾

cd 文件夾名字
http-server
這時候，就會顯示在8080端口下運行的一個本地服務器

在wechat文件夾下建立data.json文件做爲服務端數據

 

2.下載微信開發者工具

第一步：安裝
        首先下載微信開發者工具，直接下載安裝，點擊下一步

        https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716

 

2.1 建立項目應用：安裝完成後，打開並掃碼登陸。小程序發佈須要企業級的認證公衆號，因此我的訂閱號是不能發佈的。因此我這裏選擇無AppID，建立項目選擇一個本地空文件夾，勾選建立quick start 項目生成一個demo。

 

三、編寫小程序：demo初始化幷包含了一些簡單的代碼文件，其中app.js、app.json、app.wxss 這三個是必不可少的，小程序會讀取這些文件初始化實例。

　　app.js是小程序的初始化腳本，能夠在這個文件中監聽小程序的生命週期，申請全局變量和調用API等

　　app.json是對小程序的全局配置，pages設置頁面路徑組成（默認第一條爲首頁），window設置默認頁面的窗口表現等

　　app.wxss 是整個小程序的公共樣式表。相似網站開發中的common.css

2、小程序的框架

一、小程序的配置

　　app.json主要分爲五個部分：pages：頁面組，window：框架樣式（狀態欄、導航條、標題、窗口背景色），tabBar：底部菜單，networkTimeout：網絡超時設置，debug：開啓debug模式

　　page.json針對頁面單獨設置，層疊掉app.json的全局設置

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  }
}

 注意：若是想新建一個頁面組，在「pages」添加一個路徑，例如："pages/join/join"，系統可自動建立一組join頁面組

 

二、小程序的邏輯

　　使用App()來註冊一個小程序，必須在app.js中註冊，且不能註冊多個

App({//以下爲小程序的生命週期
  onLaunch: function() { },//監聽初始化
  onShow: function() {  },//監聽顯示（進入前臺）
  onHide: function() {  },//監聽隱藏（進入後臺：按home離開微信）
  onError: function(msg) {  },//監聽錯誤
  //以下爲自定義的全局方法和全局變量  
  globalFun:function(){},
  globalData: 'I am global data'
})

　　使用Page()註冊一個頁面，在每一個頁面的js文件中註冊

Page({
  data: {text: "This is page data."},//頁面數據，用來維護視圖，json格式
  onLoad: function(options) {  },//監聽加載
  onReady: function() {  },//監聽初次渲染完成
  onShow: function() {  },//監聽顯示
  onHide: function() {  },//監聽隱藏
  onUnload: function() {  },//監聽卸載
  onPullDownRefresh: function() {  },//監聽下拉
  onReachBottom: function() {  },//監聽上拉觸底
  onShareAppMessage: function () {  },//監聽右上角分享
  //以下爲自定義的事件處理函數（視圖中綁定的）
  viewTap: function() {//setData設置data值，同時將更新視圖
    this.setData({text: 'Set some data for updating view.'})
  }
})

　　

三、小程序的視圖與事件綁定

　　在每一個頁面中的wxml文件中，對頁面js中data進行數據綁定，以及自定義事件綁定

<!--{{}}綁定data中的指定數據並渲染到視圖-->
<view class="title">{{text}}</view>

<!--wx:for獲取數組數據進行循環渲染，item爲數組的每項-->
<view wx:for="{{array}}"> {{item}} </view>

<!--wx:if條件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

<!--模板-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...template.staffA}}"></template>
<template is="staffName" data="{{...template.staffB}}"></template>

<!--bindtap指定tap事件處理函數爲ViewTap-->
<view bindtap="ViewTap"> 點我點我 </view>

 

Page({
  data: {//data數據主要用於視圖綁定
    text:"我是一條測試",
    array:[0,1,2,3,4],
    view:"APP",
    template:{
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'}
    }
  },
  ViewTap:function(){console.log('額，點到我了了~')}//自定義事件，主要用於事件綁定
})

 

四、小程序的樣式

　　在每一個頁面中的wxss文件中，對wxml中的結構進行樣式設置，等同於css，擴展了rpx單位。其中app.wxss默認爲全局樣式，做用全部頁面。

 

三， 開發以下圖所示的demo

 1.輪播圖效果：

查看微信小程序開發官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注意：此時的圖片最好不要使用在線圖片，須要下載到本地在調用，否則會讀不到圖片

index.wxml:視圖層

<!--index.wxml-->
/** swiper html **/
  <swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  indicator-dots='true'
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
/** 第二板塊列表 **/
<view class='item-list'>
<view class='pro-list' wx:for="{{proLists}}" bindtap='toDetail' data-index="{{index}}">
<view class='pro-logo'><image width="150" height="100" src='{{item.logo}}'></image></view>
<view class='pro-right'>
  <view class='pro-title'>{{item.title}}
  </view>
  <text class='pro-desc'>{{item.desc}}</text>
  <view class='pro-button'><button>more</button><button open-type="contact">contact</button></view>
</view>
</view>
</view>

index.js:數據層

//index.js
//獲取應用實例
const app = getApp()
Page({
  data: {
    imgUrls: [
      '/assets/1.jpg',
      '/assets/2.jpg',
      '/assets/3.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    proLists:null
  },
  onLoad: function () {
    this.getProList();
  },
  toDetail:function(e){
    console.log(e);
    var index=e.currentTarget.dataset.index;
    console.log(index);
    var proLists = this.data.proLists;
    var title = proLists[index].title;
    wx.navigateTo({
      url:'/pages/detail/detail?title='+title,
    })
  },
  getProList: function(){
    var self=this;
    wx.request({
      url: 'http://127.0.0.1:8080/data.json',
      method:'GET',
      success:function(res){
        // console.log(res);
        self.setData({
          proLists:res.data,
        })
      }
    })
  }
})

1.Swiper代碼實現：

 

解釋：indicator-dots="true",顯示輪播圖下面的小圓點，wx:for="{{imgUrls}}"，遍歷data裏的數組imgUrls，並使圖片展現到頁面中

 2. 第二板塊列表實現：

解釋：wx:for="{{proLists}}"，遍歷數組讀取數據層的數據，展現列表信息。

此時模擬真實環境下，獲取存儲在服務端的數據。在wechat文件夾下建立data.json文件做爲服務端數據。

3. 使用小程序button組件--客服會話

 

 4.底部菜單實現：tabBar組件

在app.json中加入"tabBar"
官方文檔： https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

 

 

{
  "pages":[
    "pages/index/index",
    "pages/join/join",
    "pages/detail/detail",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{ "color":"#000", "selectedColor":"#f0f", "backgroundColor": "#ccc", "list":[{ "pagePath":"pages/index/index", "text":"Home", "iconPath":"assets/h.png", "selectedIconPath":"assets/h.png" }, { "pagePath":"pages/join/join", "text":"join", "iconPath":"assets/j.png", "selectedIconPath":"assets/j.png" }] }
}

點擊列表進入詳情頁，此時須要設定 bindtap='toDetail'，至關於js的onclick。

在數據層定義「toDetail」函數：

此時能夠設定不一樣頁面之間的傳值：