小程序之入門篇

時間  2019-11-20
標籤 程序 入門 简体版
原文   原文鏈接

1、主體css

 

1.組成
  由app.js、app.json、app.wxss三個文件組成，放在根目錄
app.js根目錄的app.js頗有用，由於在它內部註冊的變量或方法，都是能夠被全部頁面獲取到。能夠監聽並處理小程序的生命週期、聲明全局變量。其他的.js文件能夠經過var app = getApp()獲取其實例，調用其中定義的方法和變量，但不能夠調用聲明週期的方法
 
2.page文件
  pages文件夾裏是小程序的各個頁面，每一個界面通常由.wxml、.wxss、.js、.json四個文件組成，四個文件必須是相同的名字和路徑
  一、.js是頁面的腳本文件經過函數page()註冊頁面，能夠指定頁面的初始數據、生命週期、事件處理等
  二、.xml是頁面佈局文件，只能使用微信定義的組件
  三、.wxss是樣式表。
  （1）尺寸單位：rpx能夠根據屏幕的寬帶進行自適應
  （2）樣式導入：@import導入外聯樣式表，如：@import "test.wxss";
  （3）定義在app.wxss中的全局樣式，做用於每一個頁面。定義在page的.wxss文件只做用與對應的頁面，會覆蓋app.wxss中相同的選擇器
   四、.json是頁面的配置文件，只能設置app.json中的window配置內容，會覆蓋app.json中的window的相同配置項
 
2、視圖層  WXML
 
2.1  數據綁定
   傳統視圖和數據綁定
 
  小程序數據綁定 
    小程序經過什麼方式來管理視圖和對象綁定的呢？狀態模式-單向數據流，從下圖能夠看出少了DOM操做。數據流是單向的，即視圖變化不會影響對象狀態      
 
.wxml中的動態數據都來自page中的data。數據綁定使用雙大括號將變量包括起來，能夠做用於內容、組件屬性、控制屬性、關鍵字
//  .wxml文件
<view>{{message}}</view>
<view id='item-{{id}}'></view>
<view wx:if="{{status}}"></view>
<view hidden="{{hidden}}"></view>
// .js文件夾
page({
 data:{
    message:"hello",
    id:0,
    status:true
}
})
2.2  條件渲染 
用wx:if ="{{status}}"來判斷是否渲染代碼塊
<view wx:if="{{num > 5}}">isShow</view> <!-- 若是小於5，則顯示isShow -->
<view wx:elif="{{num > 9}}">hidden</view> <!-- 不然若是小於9，顯示hidden -->
<view wx:else>C</view> <!-- 不然顯示C -->
2.3 列表渲染
（1）在組件上使用wx:for屬性綁定一個數組，就能夠渲染組件
（2）默認狀況下數組的當前下標變量名爲index,當前項的變量名爲item
// .wxss 循環數組
<view wx:for="{{array}}"
  {{index}} : {{item.message}}
</view>
 
//.js
page({
  data:{
  array:["xx","jj","tt"]
}
})
（3）使用wx:for-index能夠指定數組當前下標的變量名，使用wx:for-item能夠指定數組當前元素的變量名
<view wx:for="{{array}}" wx:for-index="num" wx:for-item="listName"> //wx:for-index 和 wx:for-item 同時使用 當前下標名 當前元素的變量名 （不懂）
{{num}} : {{listName}}
</view>
2.4 模板template
（1）name定義組件模板的名稱，引用模板的時候使用is屬性指定模板的名字，is能夠進行簡單的三目運算符，須要傳入模板須要的data數據。
（2）由於模板擁有本身的做用域，因此只能使用data傳入數據，而不接受花括號的寫法
<template name="msgItem">
<view>
<text>{{index}} : {{msg}}</text>
<text>Time:{{time}}</text>
</view>
</template>
 
<!-- 其它代碼 -->
<template is="msgItem" data="{{...item}}" />
 
2.5 公共模塊的引用
（1）WXML提供import和include兩種文件引用方式。
（2）import有做用域的概念，不能多重引用
例：使用import導入 B.wxml只能導入到A.wxml中（引用到A文件），不能導入其它文件
<!-- A.wxml -->
<import src="B.wxml">
<!-- B.wxml -->
<template name="A">
<text>A template</text>
</template>
例：使用include導入
<!-- header.wxml -->
<view>header</view>
<include src="footer.wxml"/>
//其它wxml文件
<!-- 引用header。其中header.xml中也引入了footer.wxml -->
<include src="header.wxml">
<view>body</view>
2.6 事件
    （1）名稱以bind開頭的事件不阻止冒泡，名稱以catch開頭的事件冒泡是阻止的。如bindTab和catchTab
    （2）在wxml中，可使用dataset定義data中的數據，會經過事件傳遞。它的事件以data-開頭,多個單詞以-連接，如data-a-b
 
  3、小程序的生命週期
 
 
3.1 App() 應用生命週期
 
   （1）用戶首次打開小程序，觸發onLauch（全局只觸發一次）
   （2）小程序初始化完成後，觸發onShow方法，監聽小程序顯示
   （3）小程序從前臺進入後臺，觸發onHide方法 
   （4）從後臺進入前臺顯示，觸發onShow方法
   （5）後臺運行必定時間，或系統資源佔用太高，會被銷燬
   （6）小程序出錯，觸發onError 
前臺、後臺定義：當用戶點擊左上角關閉，或者按了設備home鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺
  //app.js
    //app.js
App({
  onLaunch:function() {
   // 小程序初始化(全局只觸發一次)
},
  onShow:function() {
// 小程序顯示
},
 onHide:function() {
// 小程序隱藏
},
  onError:function() {
// 小程序錯誤
}
})
例：
   
App({
  onLaunch: function (options) {
     console.log("app.js ---onLaunch---" + JSON.stringify(options));
},
 onShow: function () {
    console.log("app.js ---onShow---");
},
 onHide: function () {
    console.log("app.js ---onHide---");
},
 onError: function (msg) {
   console.log("app.js ---onError---" + msg);
},
 globalData: {
   userInfo: null
}
})
結果：

 

3.2 Page頁面生命週期
每一個頁面也有本身的生命週期
（1）小程序註冊完成後，加載頁面，觸發onLoad方法。
（2）頁面載入後觸發onShow方法，顯示頁面。
（3）首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次
（4）當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法
（5）當小程序從後臺進入前臺或從新進入頁面時，觸發onShow方法
（6）當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發onUnload
//index.js
page({
  onLoad:function(options) {
// 頁面加載-----(一個頁面只會調用一次)
},
  onReady:function() {
// 頁面渲染----(一個頁面只會渲染一次)
},
 onShow:function() {
// 頁面顯示----(每次打開頁面都會被調用一次)
},
  onHide:function() {
// 頁面隱藏---(當navigateTo或底部tab切換時調用)
},
  onUnload:function() {
// 頁面卸載---(當redirectTo或navigateBack得時候調用)
},
})
3.3 應用生命週期影響頁面生命週期
3
（1）初始化後，單首次加載觸發onLoad,只會觸發一次
（2）進入後臺，第一次執行頁面onHide方法，第二次執行應用onHide方法
（3）從後臺進入前臺，第一次執行應用onShow方法，第二次執行頁面onShow方法
例：
 
Page({
 onLoad: function (options) {
   console.log("page ---onLoad---");
},
 onReady: function () {
   console.log("page ---onReady---");
},
 onShow: function () {
   console.log("page ---onShow---");
},
 onHide: function () {
   console.log("page ---onHide---");
},
 onUnload: function () {
   console.log("page ---onUnload---");
}
})
 

4、小程序限制json

 

4.1 程序限制
    （1）js內不能使用window等對象    ps:小程序頁面的邏輯是在jsCode下運行，jsCode是沒有窗口運行環境
    （2） zepto/jquerry 會使用到window對象和document對象，因此沒法使用
    （3）樣式表不支持級聯選擇器
    （4）本地資源沒法經過css獲取 background-image 可使用網絡圖片，或者 base64 ，或者使用標籤
    （5）不支持A標籤，沒法打開普通網頁
4.2 數量限制
      （1）底部或頂部能夠添加tab按鈕區域tabBar是一個數組，只能配置最少2個、最多5個tab，tab按數組的順序排序
      （2）一個應用同時只能打開5個頁面
      （3）小程序的wx.request請求最大併發數是10個
4.3 大小限制
      （1）tabBar上的按鈕iconPath圖片路徑，icon大小限制爲40kb
      （2）tabBar上的按鈕 selectedIconPath  選中時的圖片路徑，icon大小限制也是40kb
      （3）setData頁面單次傳遞的數據設置不能超過1024kb
      （4）setStorage在本地最大緩存爲10MB
      （5）小程序源碼打包後大小限制爲1M
 
5、路由
 
頁面重定向。以下    詳細講解網址： https://www.jianshu.com/p/4ed4869bd80f
 
沒登陸騰訊視頻以前 點擊登陸會跳轉到當前頁
沒登陸發彈幕時 會彈出登陸框，登陸時候就能發 

（2）頁面設置爲tab頁，那麼只支持wx.switchTab,其它兩種接口不支持路由接口訪問（1）微信路由有wx.redirectTo、wx.navigateTo和wx.switchTab接口。其中wx.navigateTo在全局最多調用五次
5.1  在什麼狀況下會觸發頁面跳轉
       （1）啓動時，初始化第一個頁面
       （2）打開新頁面，當打開新頁面時會調用API wx.navigateTo 或使用 <navigator /> 組件
       （3）頁面重定向，會調用API wx.redirectTo 或使用<navigator /> 組件
       （4）頁面返回，會調用API wx.navigateBack 或用戶按左上角返回按鈕
       （5）tarbar切換
5.2  如何跳轉頁面
       （1）使用wx.navigateTo 接口跳轉，原頁面保留
           wx.navigateTo({
               // 將要跳轉的頁面
                url:"pages/logs/index",
               success:function(res){},
               ..    
})
      （2）使用wx.redirectTo 跳轉，關閉原來的頁面，不能返回
            wx.redirectTo({
               // 將要跳轉的頁面
                url:"pages/logs/index",
               success:function(res){},
               ..    
})
     （3）點擊返回按鈕時，程序會調用wx.navigateBack接口返回上一頁
          wx.navigateBack({
            delta:1
  })
delta爲1表示返回上頁面，爲2時，表示上上頁，以此類推；若是delta大於已打開頁面的總頁數，則返回首頁，返回首頁以後，原界面會銷燬
 
      （4）使用 navigator 組件跳轉
             <navigator url='pages/logs/index' hover-class='navigator-hover'>跳轉</navigator>
  當navigator組件添加redirect屬性時，等同於wx.redirectTo接口。默認redirect屬性爲false,等同於navigateTo接口
當頁面跳轉時會傳一個值：url?key=value&key1=value1
5.3 如何正確使用頁面跳轉 ps：官方規定最多五個頁面同時存在，也就是說頁面深度爲5
（1）對於可逆操做：使用 wx.navigateTo ，例：從首頁跳轉到二級頁面，從二級頁面返回是不須要從新渲染首頁
（2）對於不可逆操做（沒法返回上一級頁面）：使用wx.redirectTo。例：用戶登陸成功後不須要返回登陸頁面 ps:在首頁不能使用wx.redirctTo
          （3）對於介紹性等不經常使用的頁面。推薦使用wx.redirectTo或wx.navigatrBack
5.4  頁面棧
          （1）頁面棧以棧（先進後出）的形式維護頁面與頁面的關係
          （2）小程序提供了 getCurrentPages() 函數獲取頁面棧，第一個元素爲首頁，最後一個元素爲當前頁面
       使用wx.navigateTo每新打開一個頁面，頁面棧大小加1，直到頁面棧大小加到5爲止   （頁面棧最大爲5）
wx.navigateTo和wx.redirctTo的區別以下：
    wx.navigateTo重複打開頁面   例：
       當使用wx.navigateTo從四級頁面跳轉到二級頁面時，會在頁面棧頂添加一個與二級頁面初始狀態同樣的界面。這兩個頁面時相互獨立的。頁面棧大小會加1，當大於5時，則wx.navigateTo無效
      使用wx.redirctTo從四級頁面重定向到二級頁面時，此時會關閉四級頁面，四級頁面會替換成二級頁面，兩個頁面相互獨立，頁面棧大小不會所以而改變
   使用wx.navigateBack返回
 
它們三個的區別：
   
 
方法 區別
wx.navigateTo 增長頁面棧大小，直至頁面棧爲5時中止跳轉
wx.redirectTo 不會改變頁面棧大小
wx.navigateBack 減小頁面棧大小，直到頁面棧爲1時中止返回
 
使用wx.navigateTo方法跳轉   例：
   .wxml文件
<button bindtap='click'>運行</button>
 
.js文件
page({
 　　   click:function(){
      wx.navigateTo({
          url: '../index/index'     //跳轉到index頁面
})
 
 6、數據通訊
 
 
setData ：把獲取到的信息經過 setData 顯示到頁面上
6.1  頁面之間的通訊
// A頁面-傳遞數據 // 須要注意的是，wx.switchTab 中的 url 不能傳參數。 wx.navigateTo({    url:'../pageD/pageD?name=raymond&gender=male' }) // B頁面-接收數據 經過onLoad的option...
page({
onLoad:function(option){
      console.log(option.name + 'is' + option.gender) //raymond is male
    this.setData({
      option:option
})
}
})
6.2  參數傳遞
    6.2.1  小程序傳遞參數的方式
         1.App.js中設置全局變量
        app.js的Data一般放不會更改的數據，在每一個頁面能夠經過APP實例獲取Data數據
var app = getApp();
var data = app.data;
        2.經過拼接URL直接傳遞
  wx.navigateTo({})中攜帶參數
   wx.navigateTo({
     url:'test?id=1'
})
在wxml中使用navigator標籤中攜帶URL參數 例：
<navigator class='test-item' url='pages/logs/index?testId={{testData.testId}}'>跳轉</navigator>
說明：將要傳遞到另外一個頁面的字符串testId的賦值到URL中
   在js頁面中使用onLoad方法接收
page({
     onLoad:function(options){
   var testId = options.testId
     console.log(testId)
}
})
navigator跳轉URL傳遞數組
  若是一個頁面以數組爲參數進行傳遞，如：相冊列表傳遞到另外一個頁面
<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}"></navigator>
在js頁面中onLoad方法接收
page({
data:{
    //相冊列表數據
    albumList:[]
},
onLoad:function (options) {
    var that = this;
    that.setData({
        albumList:options.albumList.split(",") //albumList爲相冊列表數據
    })
  }
})
 
    3.在wxml中綁定事件後，經過data-hi="參數"的方式傳遞    ps：若是須要傳遞多個數據，使用data-[參數]的方式進行傳遞
<view bindtap="clickMe" data-testId="{{testId}}">
</view>
 
在js頁面使用自定義clickMe方式接收
page({
    clickMe:function(event){
        var testId = event.currentTtarget.dataset.testid;
        wx.navigateTo({
        url:'../../pages/test/test'
})
}
})
wxml中配置data-albumlist傳遞數組
<view bindtap="clickMe" data-albumlist="{{testData.albumlist}}">
</view>
 
 
js代碼
page({
    clickMe:function(){
    // 打印出來爲字符串，因此還要從新組裝成數組
    var albumlist = event.currentTarget.dataset.albumlist.split(","); //albumList爲相冊列表數據
    wx.navigateTo({
    url:'../../pages/test/test'
})
}
})
4.經過數據緩存存儲再獲取
存儲數據：wx.setStroageSync(KEY,DATA)      獲取數據：wx.setStroageSync(KEY）
//緩存
try {
    wx.setStorageSync('key','value')
   }catch (e){
}
 
// 再獲取
try {
    var value = wx.getStorageSync('key')
if(value) {
// 返回的值
}
}catch(e){
// 可能出錯的值
}
 
// 或使用
wx.getStorage({
 key:'key',
success:function(res){
console.log(res.data)
}
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程