摘要：具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量，接下來(lái)使用點(diǎn)語(yǔ)法直接調(diào)用請(qǐng)求下來(lái)的值就可以了。

參考方法

小程序官方文檔

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

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

組件文檔

一般我們?cè)诠こ痰摹癮pp.json”中設(shè)置 1.pages 所有的頁(yè)面路徑，2.window 導(dǎo)航欄頭部 3.tabBar 底部的tabBar，小程序中我們用list 數(shù)組結(jié)構(gòu)存放tabBarItem 。

//.wxml ， 函數(shù)goBack實(shí)現(xiàn)在.js文件中，button 樣式制定在 .wxss文件中

返回

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

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

以畫(huà)一個(gè)笑臉為例：

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

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

//臉最外層圓
//起點(diǎn)moveTo(X, Y)
context.moveTo(160, 100)
//arc(中心點(diǎn)X, 中心點(diǎn)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)

//一個(gè)stroke對(duì)應(yīng)一個(gè)動(dòng)畫(huà)節(jié)點(diǎn)
context.stroke()
context.draw()
},

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

display：指定項(xiàng)目是否為伸縮容器，flex塊級(jí)的伸縮，direction：方向

display: flex;

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

flex-direction: row;

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

flex-wrap: wrap;

flex-flow: 相當(dāng)于flex-direction: 和 flex-wrap 的綜合體 此處多余。

flex-flow: row wrap;

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

justify-content: space-around;

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

align-content:center; 

position absolute：絕對(duì)定位，相對(duì)于父級(jí)，此時(shí)父級(jí)必須是已定位的。 relative：相對(duì)定位，相對(duì)于自己，具體效果實(shí)操中感受 （比如對(duì)象需要離屏幕右邊界20px ,但是右邊無(wú)可參考元素時(shí)，可考慮絕對(duì)定位，但需要找準(zhǔn)父視圖。）

.mix{
display: flex;
/** margin:相當(dāng)于盒子本身以外相對(duì)方向上的最近的元素，若該方向上沒(méi)有元素 則設(shè)置值無(wú)效，此時(shí)應(yīng)該使用position進(jìn)行絕對(duì)定位，可相對(duì)布局 **/ 
margin-top: -20px;
/** 小程序中的定位問(wèn)題  absolute：?jiǎn)⒂媒^對(duì)定位 relative：相對(duì)定位**/
position: absolute;
right: 20px;
}

跳轉(zhuǎn)到某個(gè)一級(jí)頁(yè)面：url 頁(yè)面路徑; open-type：open-type 屬性類型詳解; hover-class ：點(diǎn)擊效果

查看日志

showSkuIndex 在page data 中聲明的全局變量 都需要在系統(tǒng)的this.setData方法中進(jìn)行賦值

this.setData({
        showSkuIndex: index
});

微信小程序可以直接處理json數(shù)據(jù) ，例子是在app.js 中封裝的一個(gè)接口。在其他頁(yè)面的.js中調(diào)用ajax 并在onShow函數(shù)中進(jìn)行請(qǐng)求。就相當(dāng)于我們的OC 中封裝的一個(gè)網(wǎng)絡(luò)請(qǐng)求方法類。具體調(diào)用參考demo

1.接口請(qǐng)求封裝函數(shù) 一般在app.js中實(shí)現(xiàn)
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") || "";
    //微信自帶的網(wǎng)絡(luò)請(qǐng)求方法
    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.調(diào)用接口請(qǐng)求函數(shù) 如 在index.js中  
//首先需要獲取應(yīng)用實(shí)例
 var app = getApp()
 
 onShow: function() {
//調(diào)用數(shù)據(jù)請(qǐng)求
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函數(shù)中聲明的一個(gè)全局變量，
        hotBrands: data.model.offlineHotList,
      });
      console.log(data.model)
    } else {
      wx.showTip(data.message);
    }
  }
});
//接下來(lái)使用點(diǎn)語(yǔ)法直接調(diào)用請(qǐng)求下來(lái)的值就可以了。