小程序部分知識點隨記

1.http

wx.request(OBJECT);
例子:
wx.request( {
    url: "http://op.juhe.cn/onebox/weather/query",
    header: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST",
//data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" },
    data: Util.json2Form( { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }),
    complete: function( res ) {
        that.setData( {
            toastHidden: false,
            toastText: res.data.reason,
            city_name: res.data.result.data.realtime.city_name,
            date: res.data.result.data.realtime.date,
            info: res.data.result.data.realtime.weather.info,
        });
        if( res == null || res.data == null ) {
            console.error( '網絡請求失敗' );
            return;
        }
    }
})

2.路由

2.1 保留當前頁面,跳轉到應用內的某個頁面,使用 wx.navigateBack 能夠返回到原頁面。

    // 注意:目前頁面路徑最多隻能十層。
    wx.navigateTo(OBJECT)

    // 示例 1
    wx.navigateTo({
        url: 'test?id=1'
    })
    //test.js
    Page({
        onLoad: function(option){
            console.log(option.query)
        }
    })

    // 示例二
    wx.navigateTo({
        url:"pages/home/home?type=2"
    });

    // 而後在 home.js 中的 onLoad() 函數中獲得值:option.type 就能夠獲得了,以下:

    onLoad: function (option) {
        this.setData({
            type:option.type,
        });
        console.log(option.type);
    }

2.2 關閉當前頁面,跳轉到應用內的某個頁面。

    wx.redirectTo(OBJECT)
    // 示例
    wx.redirectTo({
        url: 'test?id=1'
    })
    //test.js
    Page({
        onLoad: function(option){
            console.log(option.query)
        }
    })

    // wx.navigateTo() 是保留當前頁面,跳轉到某個頁面,跳轉頁面後能夠返回上一頁。
    // wx.redirectTo() 是關閉當前頁面,跳轉到某個頁面,跳轉頁面後不能返回上一頁。
    // 等等

3.全局方法和數據

// 全局的 getApp() 函數能夠用來獲取到小程序實例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

4.數據和事件

4.1 改變數據

    this.setData({
        message:"你好 米娜!"
    })

4.2 獲取數據

    this.data.message
    //重點,若要用傳參的形式設置數組的值,要用[]將字符串參數值括起來
    //示例一
        Page({
            data: {
            plaintPerList: []
            }
        })
        var type = 'plaintPerList';
        var list = [];
        this.setData({
            [type]: list
        })
    //示例二
        var printPrice = "item["+i+"].print_price";  
            this.setData({  
            [printPrice]: e.detail.value  

4.3 經過事件傳遞數據 dataset

    // target 觸發事件的源組件
    // currentTarget 事件綁定的當前組件
    
    //-----wxml----
    <view class="weui-cell__bd">
        <input class="weui-input" value="{{item.name}}" placeholder="請輸入姓名" bindinput="saveEditor"
           data-editor-Type="plaintPerList" data-json-Key="name" data-editor-Index="{{index}}"/>
    </view>
    //-----js----        
    saveEditor: function(e) {
        // type 數組對象名稱
        // index 位置
        // jsonKey 數組屬性名
        var that = this;
        var type = e.currentTarget.dataset.editorType,
          index = e.currentTarget.dataset.editorIndex,
          jsonKey = e.currentTarget.dataset.jsonKey;
          var list = that.data[type];
        list[index][jsonKey] = e.detail.value;
        // 從新賦值
        that.setData({
        [type]: list
        })
    }
相關文章
相關標籤/搜索