摘要：具體調用參考接口請求封裝函數一般在中實現微信自帶的網絡請求方法調用接口請求函數如在中首先需要獲取應用實例調用數據請求在函數中聲明的一個全局變量，接下來使用點語法直接調用請求下來的值就可以了。

參考方法

小程序官方文檔

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

注釋：（每個目錄的注釋規(guī)則不一樣，但是親測 commond+? 都可以自動加注釋）。

組件文檔

一般我們在工程的“app.json”中設置 1.pages 所有的頁面路徑，2.window 導航欄頭部 3.tabBar 底部的tabBar，小程序中我們用list 數組結構存放tabBarItem 。

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

返回

image 默認100%填充控件，定制image樣式需要用到 style 標簽樣式。 mode ：圖片縮放規(guī)則，“{{}}”代表對象是一個參數

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

以畫一個笑臉為例：

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對應一個動畫節(jié)點
context.stroke()
context.draw()
},

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

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 absolute：絕對定位，相對于父級，此時父級必須是已定位的。 relative：相對定位，相對于自己，具體效果實操中感受 （比如對象需要離屏幕右邊界20px ,但是右邊無可參考元素時，可考慮絕對定位，但需要找準父視圖。）

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

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

查看日志

showSkuIndex 在page data 中聲明的全局變量 都需要在系統(tǒng)的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);
    }
  }
});
//接下來使用點語法直接調用請求下來的值就可以了。