微信小程序入門學習小結--全局設置、數據請求、雙向綁定、頁面路由跳轉、模板抽取


  學習微信小程序必備工具,微信小程序開發文檔 W3C的這個文檔真是超級詳細,我們能夠在這里查找到微信小程序的API、組件以及一些框架等。

  結合自己仿寫的demo--仿網易蝸牛讀書,你會感覺小程序並不難,前提你要屬性前端的基本知識,wxml == html,  wxss == css, 

  下載微信開發者工具 他能幫助我們快速的進行小程序的開發。當然,在開發之前我們還需要擁有一個小程序賬號(注冊教程),通過賬號我們就能夠管理自己的小程序了。

  注: 這里有兩種注冊途徑開發demo:

    1、沒有申請APPID: 可以在新建項目的時候,選擇無AppID,但是這種不能再手機上調試。

    2、申請APPID(點我): 點擊開發者工具的上面的調試,用微信掃描彈出的二維碼 ,即可在手機上看(蘋果和安卓通用),他人也可通過此二維碼進行觀看,注意有時間限制。

  PS:申請APPID信息登錄的時候,選擇其他組織。主體信息登記可以文字隨便填(認證碼必須按照規定的字數),圖片隨意(表情包都可以),管理員登記必須是實名制,其他都沒什么了,對了,不要去認證什么的,因為你的信息本來就是錯了。

  打開微信開發工具,新建新項目,准備工作結束。

  一、app.js、app.json、app.wxss,這三個是全局配置文件。

  如果是入門學習,可以不用理會app.js,簡單了解即可,app.wxss是配置全局的樣式,一般用於初始化樣式,常用樣式的class,重點講一下app.json

  

{
  // pages里面是快捷配置生成對應的頁面,最上面是第一個展示的頁面,可以自己調試
"pages":[ "pages/index/index", // 封面 "pages/logs/logs", // 日志 "pages/leader/leader", // 首頁 "pages/leader/stories/stories", "pages/leader/authors/authors", "pages/stack/stack", // 分類 "pages/stack/booklist/booklist", "pages/stack/booklist/bookdetail/bookdetail", "pages/bookdesk/bookdesk", // 書架 "pages/mine/mine", // 個人中心 "pages/mine/news/news", "pages/mine/editInfo/editInfo" ],
  // 設置頂部導航欄的背景顏色、標題、不過顏色有限制,只有兩種
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "蒂花之秀讀書", "navigationBarTextStyle":"black" },
  // 底部的tab切換欄配置,注意list中的四種屬性不能缺少,不能用文字圖標,可以在iconfont.cn中下載png圖片,塗上顏色即可
"tabBar":{ "color": "#6d4015", "selectedColor": "#1296db", "backgroundColor": "#ffffff", "borderStyle": "#e0e0e0", "list": [ { "pagePath": "pages/leader/leader", "iconPath": "./assets/icons/lingdu.png", "selectedIconPath": "./assets/icons/lingdu_sel.png", "text": "首頁" }, { "pagePath": "pages/stack/stack", "iconPath": "./assets/icons/stack.png", "selectedIconPath": "./assets/icons/stack_sel.png", "text": "分類" }, { "pagePath": "pages/bookdesk/bookdesk", "iconPath": "./assets/icons/bookdesk.png", "selectedIconPath": "./assets/icons/bookdesk_sel.png", "text": "書架" }, { "pagePath": "pages/mine/mine", "iconPath": "./assets/icons/mine.png", "selectedIconPath": "./assets/icons/mine_sel.png", "text": "我的" } ] } }

  二、頁面路由跳轉

  wx.navigateTo、wx.redirectTo、wx.switchTab、 wx.reluanch(重啟動),主要是前面三種。

  1、navigateTo、redirectTo只能開大非tabBar頁面(tabBar頁面就是在app.json 中設置的tabBar中list的頁面),前者可以跳轉后可以保存前面的頁面,不用重新生成,最多5個,這樣加載的速度非常快。后者前面的頁面會被銷毀,需要重新生成,如果網絡較差,會很卡。

  2、switchTab只能打開tabBar頁面,如從index封面頁面定時跳到tabBar。

//index.js
//獲取應用實例
const app = getApp();

Page({
  data: {
    time: 3
  },
  
  // 三秒進入tabBar頁
  onLoad: function () {
    var that = this;
    var count = setInterval(function(){
      that.setData({
          time: that.data.time - 1
        });
      if (that.data.time <= 0){
        // 跳轉tabBar頁面
        wx.switchTab({
          url: "../leader/leader",
          complete: function(e){
            clearInterval(count);
          }
        });
      }
    }, 1000)
  }
})

  三、模塊化開發,比如將共用的js進行封裝,common.js,然后通過module.exports進行暴露對應的方法,方便調用

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}

module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye

// 在需要使用這些模塊的文件中,使用require(path)將公共代碼引入。
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

  四、wxml渲染

// 數據渲染
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

// 列表渲染
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

// 條件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

// 模板渲染(模板的文件不需要在app.json中配置)
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staff}}"></template>
// page.js
Page({
  data: {
    staff: {firstName: 'Hulk', lastName: 'Hu'}
  }
})
注:在導入模板的時候需要提前引入,wxml: <import src="./index/button/botton.wxml">, wxss: @import "./index/button/botton.wxss"
// 事件渲染 <view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) } })

  五、后台數據請求

  EasyMock 簡單高效的偽造數據 用於后台的數據模擬,得到JSON數據,方便開發,個人免費, 前端自定義數據格式,同時方便后台的輸出格式。

 onLoad: function (options) {
    // 請求數據
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/5a31e9eb513048307be27a9a/test/",
      success: function(res){
        that.setData({authors: res.data.data.index});
      }
    })
  },

  優化建議:

 1、頻繁的去setData

  頻繁的去操作數據setData,給data中的數據進行數據綁定,會造成卡頓。

 2、每次setData都傳遞大量新數據

 3、后台態頁面進行setData

 4、圖片資源

 還有一些常用標簽:view(div) 、view-scroll(可滾動)、swiper(可輪播)、cover-view(覆蓋視圖上的文字)、movable-area、icon、text、rich-text、progress等標簽元素,請參考微信小程序開發文檔 。

  最后再說一句: 自己仿寫的demo--仿網易蝸牛讀書,有興趣的同學可以看看,仿寫一下哦;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM