1. 程式人生 > >微信小程序學習記錄(一)

微信小程序學習記錄(一)

地址 n) taf forest 對象復制 strong display exp 價格

如何定義一個全局變量:

1,在根目錄下app.js中添加

App({
  globalData: {
    g_isPlayingMusic : false,
    g_currentMusicPostId :null,
    doubanbase:"https://api.douban.com",
    self_reduction:"自減"
  }
})

2,在js中訪問我們的全局變量

var app = getApp();   //全局的 getApp() 函數可以用來獲取到小程序實例。

onLoad: function (options) {
console.log(app.globalData.doubanbase); //打印
doubanbase變量

console.log(app.globalData.self_reduction); //打印doubanbase變量
 },

Success方法中如何訪問data中的數據:that=this講解

data: {
    tips:"提交成功!!"  //先綁定數據
  },


  formSubmit: function (event) {
      var that = this   
      wx.showModal({
      title: this.data.tips,      //this.data.tips可以訪問到數據
      content: ‘這是一個模態彈窗‘,
      success:function(e){
        var a = that.data.tips   //這裏必須用that.data.tips才能訪問到數據!
        console.log(a)
      }
    })
為什麽在success下用this.data.tips訪問不到數據?因為,success方法調用方,不是page(所以不能用this),所以是取不到data下面的tips。 如何處理:把this保留一下將其賦值給that : that = this。然後用that.data.tips就能訪問到數據了。

動態設置導航欄標題

設置標題最好是在onReady函數中,因為此時頁面已經渲染完成。
生命周期的函數的執行順序:onLoad-->onShow-->onReady
onLoad指頁面初始化,頁面初始化的過程中,是不應該操作和UI相關的東西的,因為頁面還沒有正式生成。
 //生命周期函數--監聽頁面加載
  onLoad: function (options) {
    console.log("Onload");
  },

//生命周期函數--監聽頁面初次渲染完成
  onReady: function () {
    console.log("onReady");
    wx.setNavigationBarTitle({  //設置標題
      title: ‘當前頁面‘
    })
  },

  //生命周期函數--監聽頁面顯示
  onShow: function () {
    console.log("onShow");
  },        

關於API

API狀態碼:

404:資源沒有找到。

400: 參數錯誤。

200: 查詢操作-get請求成功

201: post創建資源成功

202: 更新成功。

401: 未授權。

403: 當前資源被禁止。

500: 未知錯誤。

Postman:HTTP請求模擬工具

Postman : 下載地址

win7下安裝出錯?暫時禁用在您安裝Postman時運行的任何防病毒程序。

scroll-view組件:橫向滾動

http://blog.csdn.net/u014360817/article/details/52658760

http://blog.csdn.net/u013778905/article/details/60332971

小程序選擇器對於first-child、:last-child支持。

微信小程序地圖如何設置滿屏?

將地圖的高度設置為100vh, 寬度設置為100%即可。

MVC

home.js -- C層負責:數據綁定最後關聯到xml中

home-model.js -- M層負責:業務邏輯處理

Number() 函數

Number() 函數把對象的值轉換為數字。如果對象的值無法轉換為數字,那麽 Number() 函數返回 NaN。

商品總價格計算。

pointer-events

對某一個元素比如div采用div{pointer-events:none}即可讓這個HTML元素(包括它的所有子孫元素)失去所有的事件響應。鼠標焦點會直接無視它,click、mouseover等所有事件會穿透它到達它的下一級元素

specifies under what circumstances a given element can be the target element for a pointer event

product.js頁面:

購物車增加商品響應到產品列表頁面
  //檢測緩存中counts變化  點擊才能觸發
  // detectStorage: function (index,i) {
  //   var cartData = cart.getCartDataFromLocal(),
  //       productsArr = this.data.productsArr;
  //       console.log(productsArr);
  //   if (cartData[index].counts != productsArr[i].counts) {
  //     productsArr[i].counts = cartData[index].counts;
  //   }
  //   this.setData({
  //     productsArr: productsArr
  //   })
  // },

問:微信小程序在手機上只有打開調試模式的時候才能用

答:域名不合法、不一致 https。

為什麽域名不一致開發者工具就能請求到數據呢,應該是因為開發者工具沒有驗證請求的域名和微信小程序設置的rquest合法域名是否一致的操作,所以開發者工具就能請求的到,而且手機中有這一步操作的,所以手機不能成功請求。

鏈接1

<text>標簽之間有間隔 -- 用display:flex解決

scroll-view 橫向滾動

要想橫向滾動,首先要先把子元素設置成一行

要對子元素進行display:inline-block 【或者display:inline-flex;】,容器進行 white-space: nowrap;

.scroll-ms{
  white-space: nowrap; 
}
.ms_pro{
  display: inline-block;
  width: 249rpx;
  height: 322rpx;
  background: #f3f3f3;
  margin-right: 20rpx;
}

分享生成海報

小程序如何生成帶參數二維碼?

微信小程序之生成圖片分享 微信小程序保存圖片分享到朋友圈功能

關於小程序未上線二維碼識別功能開發 二維碼掃碼空白重定向

微信小程序JS導出和導入

Promise 處理異步調用的一大利器

promisify.js:

module.exports = (api) => {
  return (options, ...params) => {
    return new Promise((resolve, reject) => {
      api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);//花括號叫目標對象,後面的是源對象。對象合並是指:將源對象裏面的屬性添加到目標對象中去,若兩者的屬性名有沖突,後面的將會覆蓋前面的
    });
  }
}

參考:使用Promise簡化回調

微信小程序使用Promise

Class和function

class的功能是對function的打包,當你需要打包多個function成一個模塊(class)時,就用class而不是裸的function。

小程序中:a : function(){}是什麽格式?

使用JSON語法創建JavaScript對象時屬性值不僅可以是普通字符串,也可以是任何數據類型,還可以是函數、數組,甚至可以是另外一個JSON語法創建的對象

json中的值是map形式 key->value。a:function(){} 中 a是key,function() 是 value

var person={
    name:‘tom‘,
    son:{//使用JSON對象為其指定一個屬性
        name:‘nono‘,
        grade:1
    },
    say:function(){ //使用JSON語法為person直接分配一個方法
        alert(‘heloo‘);
    }
}

function() {} 是匿名函數。

a: function(){} 外部一定有一對 { },是Map的一個元素,a作為鍵名,匿名函數作為鍵值

參考:這裏

Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

Object.assign(target, ...sources)

復制對象:
var object = {
    a:1,
    b:2,
    c:3,
    d:4
}
var copy=Object.assign({},object);
console.log(copy); //{a: 1, b: 2, c: 3, d: 4}

合並對象:

var ob1 = {a:11};
var ob2 = {b:22};
var ob3 = {c:33};

var bing = Object.assign({},ob1,ob2,ob3);
console.log(bing); //{a: 11, b: 22, c: 33}
console.log(ob1); //{a: 11}

微信小程序學習記錄(一)