微信小程序學習簡介

如何向微信小程序導入DEMO源碼：

參考方法

參考學習小程序官方文檔

小程序官方文檔

小程序目錄簡介

app.json ：設置一些工程全局的量
.js : 寫一些函數邏輯
.wxml: 調用.js中寫的函數相似於 web的html 相似於IOS 的View UI 層
.wxss: 控件的屬性描述，相似於 web 的 CSS ，相似於 IOS 的控件屬性封裝

註釋：（每一個目錄的註釋規則不同，可是親測 commond+? 均可以自動加註釋）。

小程序組件簡介

組件文檔

tabBar && pages && navigationBar

通常咱們在工程的「app.json」中設置 1.pages 全部的頁面路徑，2.window 導航欄頭部 3.tabBar 底部的tabBar，小程序中咱們用list 數組結構存放tabBarItem 。

button

//.wxml ， 函數goBack實如今.js文件中，button 樣式制定在 .wxss文件中

<button class='redbtn' bindtap='goBack'>返回</button>

image

image 默認100%填充控件，定製image樣式須要用到 style 標籤樣式。 mode ：圖片縮放規則，「{{}}」表明對象是一個參數

<image style="width: 40px; height: 40px;" mode='aspectFit' src='{{item}}' bindtap='bindViewTap'></image>

icon

圖標 ，type的類型有success, success_no_circle, info, warn, waiting, cancel, download, search, clear 這幾種

<view class="group">
    <block wx:for="{{iconType}}">
           <icon type="{{item}}" size="40"/>
    </block>
</view>

swiper 經常使用的輪播圖控件

<view>
  <!--indicator-dots 至關於IOS 的Page點; circular 是否採用銜接滑動-->
    <swiper indicator-dots= 'false'
     autoplay= 'true' duration='0.5' circular= 'true' previous-margin='30px' next-margin='30px'>
     <!--for循環最好是放在block函數塊中執行，view 中也可直接放在view中執行 -->
       <block wx:for="{{imgUrls}}">
          <swiper-item >
             <!-- 此處的item 爲泛指，指for循環體所循環數組裏面對應的對象-->
              <image src='{{item}}' height="150"></image>
          </swiper-item>
      </block>
  </swiper>
</view>

canvas ：畫布組件（能夠自定製一些動畫，相似於ios 的CAShapeLayer + UIBezierPath）畫圖邏輯在JS中實現）

以畫一個笑臉爲例：

onReady:function(e) {
var context = wx.createCanvasContext("popView", this)
//畫矩形
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
//rect：矩形（X,Y,W,H）
context.rect(0, 0, 200, 200)
context.stroke()

//畫圓型（從右向左畫）
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)

//臉最外層圓
//起點moveTo(X, Y)
context.moveTo(160, 100)
//arc(中心點X, 中心點Y, 半徑, 0, 角度（Math.PI=180度）, true)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)


//嘴巴
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)

//左眼
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)

//右眼
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)

//一個stroke對應一個動畫節點
context.stroke()
context.draw()
},

小程序API簡介：API學習連接

小程序UI佈局簡介

flex佈局，position ，inline-block，-webkit-box 等都是小程序佈局中常常用到的。

flex佈局簡介 佈局參考連接

display：指定項目是否爲伸縮容器，flex塊級的伸縮，direction：方向

display: flex;

direction: 元素排列方向 row 從左向右 橫向排, row-reverse 從右向左，column 豎向排列

flex-direction: row;

flex-wrap:控制元素是否換行 wrap 順序換行 wrap-reverse 倒序換行

flex-wrap: wrap;

flex-flow: 至關於flex-direction: 和 flex-wrap 的綜合體 此處多餘。

flex-flow: row wrap;

justify: (主要是對齊方式玩的花樣比較多) 沿主軸的對齊方式 主要說下space-around：平均分佈在主軸 兩端保留一半空間。space-between 平均分佈在主軸 兩端不保留空間。

justify-content: space-around;

align: 沿交叉軸的對齊方式(content：換行狀況下的對齊方式，具體樣式略)

align-content:center;

position 相對定位和絕對定位 （解決問題：單個對象靠右側無其餘對象參考狀況下的右對齊佈局）position參考連接

position absolute：絕對定位，相對於父級，此時父級必須是已定位的。 relative：相對定位，相對於本身，具體效果實操中感覺 （好比對象須要離屏幕右邊界20px ,可是右邊無可參考元素時，可考慮絕對定位，但須要找準父視圖。）

.mix{
display: flex;
/** margin:至關於盒子自己之外相對方向上的最近的元素，若該方向上沒有元素 則設置值無效，此時應該使用position進行絕對定位，可相對佈局 **/ 
margin-top: -20px;
/** 小程序中的定位問題  absolute：啓用絕對定位 relative：相對定位**/
position: absolute;
right: 20px;
}

template 複用模板佈局 template使用參考連接

小程序簡單交互邏輯

頁面跳轉 (主要講二級頁面跳轉一級頁面/非原路返回)

跳轉到某個一級頁面：url 頁面路徑; open-type：open-type 屬性類型詳解; hover-class ：點擊效果

<navigator url='../logs/logs' open-type='switchTab' hover-class='none'>查看日誌</navigator>

全局變量的賦值

showSkuIndex 在page data 中聲明的全局變量 都須要在系統的this.setData方法中進行賦值

this.setData({
        showSkuIndex: index
});

接口請求及數據模型解析

微信小程序能夠直接處理json數據 ，例子是在app.js 中封裝的一個接口。在其餘頁面的.js中調用ajax 並在onShow函數中進行請求。就至關於咱們的OC 中封裝的一個網絡請求方法類。具體調用參考demo

1.接口請求封裝函數 通常在app.js中實現
ajax: function(options){
    let that = this;
    let params = {};
    params = options.data || {};
    params.source = 'wx_xiaochengxu';
    params.version = '3.3.0';
    if(params.sign !== undefined){
        delete params.sign;
    }
    params.sign = that.creatSign(params);

    // options.data.weChatSession = wx.getStorageSync('weChatSession') || '';
    //微信自帶的網絡請求方法
    wx.request({
        url: that.globalData.apiUrl + options.url,
        method: options.method || 'POST',
        data: params,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: options.success,
        fail: options.fail
    });
},

2.調用接口請求函數 如 在index.js中  
//首先須要獲取應用實例
 var app = getApp()
 
 onShow: function() {
//調用數據請求
this.getIndexData();
},

getIndexData: function() {
var that = this;
app.ajax({
  url: '/homepageV4',
  success: function (res) {
    var data = res.data;
    wx.stopPullDownRefresh()
    if (data.success) {
      that.setData({
      //hotBrands 在Page函數中聲明的一個全局變量，
        hotBrands: data.model.offlineHotList,
      });
      console.log(data.model)
    } else {
      wx.showTip(data.message);
    }
  }
});
//接下來使用點語法直接調用請求下來的值就能夠了。