推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1324|回復: 0
    打印 上一主題 下一主題

    [小程序教程] 小程序入門教程及實例

    [復制鏈接]
    跳轉到指定樓層
    樓主
    發表于 2018-4-21 17:11:44 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

      目錄
      開發環境
      目錄結構
      WXML組件
      WXSS
      數據綁定
      條件渲染
      列表渲染
      模版
      事件
      引用
      路由傳參
      API
      實例TodoList
      1.開發環境
      開發工具下載(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
      安裝之后,和微信web開發者工具一樣,掃碼登錄即可,不同的是,創建一個小程序需要填寫AppID,如果沒有AppID的話,點擊‘無AppID’即可
      2.目錄結構
      一個小程序由兩部分組成:框架主體部分、框架頁面部分
      框架主體部分
      框架主體部分包含三個文件,位于項目的根目錄
      1) app.js
      //app.js//app.js
      App({
      onLaunch: function () {
      // 當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次)
      // 調用API從本地緩存中獲取數據
      var logs = wx.getStorageSync('logs')  []
      logs.unshift(Date.now())
      wx.setStorageSync('logs', logs)
      },
      onShow: function() {
      // 當小程序啟動,或從后臺進入前臺顯示,會觸發 onShow
      },
      onHide: function() {
      // 當小程序從前臺進入后臺,會觸發 onHide
      },
      getUserInfo:function(cb){
      var that = this
      if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
      }else{
      //調用登錄接口
      wx.login({
      success: function () {
      wx.getUserInfo({
      success: function (res) {
      that.globalData.userInfo = res.userInfo
      typeof cb == "function" && cb(that.globalData.userInfo)
      }
      })
      }
      })
      }
      },
      globalData:{
      userInfo:null
      }
      })
      app.js內調用了App函數(只能在app.js內調用)注冊小程序實例,可以在這個文件中監聽處理小程序的聲明周期函數,并可以在此聲明全局變量。
      小程序提供了全局方法getApp返回小程序實例
      var app = getApp()
      console.log(app.globalData) // {userInfo:null}
      此外,還提供了getCurrentPage方法獲取當前頁面的實例,getCurrentPage不能在onLaunch中調用,此時page尚未生成
      2)app.json
      {
      "pages":[
      "pages/index/index",
      "pages/logs/logs"
      ],
      "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle":"black"
      },
      "tabBar": {
      "list": [{
      "pagePath": "page/index/index",
      "text": ""
      }, {
      "pagePath": "page/logs/logs",
      "text": "日志"
      }]
      },
      "networkTimeout": {
      "request": 10000,
      "downloadFile": 10000
      },
      "debug": true
      }
      此文件用來對小程序進行全局配置(app.json不得含有注釋)
      pages 配置頁面路由,所有需要使用的頁面都需要添加配置
      window 設置頁面窗口表現
      tabBar 設置頁面底部tab表現,其中list數組長度不超過5且至少為2
      networkTimeout 設置網絡超時時間
      debug 設置debug模式的開啟
      3)app.wxss樣式表
      /**app.wxss**/
      .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
      }
      框架頁面部分
      框架頁面部分包含四個文件
      page.js,page.json分別對應于app.js和app.json,不同之處在于page.js中調用的是Page函數,page.json中只能對本頁的window進行配置,因此,page.json中直接就是一個對象
      {
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle":"black"
      }
      然后再看看page.js
      // page.js
      Page({
      data: {
      // 頁面的初始數據
      text: "This is page data."
      },
      onLoad: function(options) {
      // 頁面加載時
      },
      onReady: function() {
      // 頁面渲染完成時
      },
      onShow: function() {
      // 頁面顯示時
      },
      onHide: function() {
      // 頁面隱藏時
      },
      onUnload: function() {
      // 頁面卸載時
      },
      // 自定義屬性,使用this方法
      viewTap: function() {
      this.setData({
      text: 'Set some data for updating view.'
      })
      }
      })
      3.WXML組件
      小程序中并沒有html標簽,而是提供了一系列WXML組件
      view 視圖容器
      scroll-view 可滾動視圖容器
      swiper 滑塊視圖容器
      icon 圖標
      text text
      progress progress
      button button
      checkbox-group 多項選擇器,內部由多個checkbox組成
      checkbox 多選項目
      form form
      input input
      label label
      picker 滾動選擇器,現支持三種選擇器,通過mode來區分,分別是普通選擇器,時間選擇器,日期選擇器,默認是普通選擇器
      radio-group 單項選擇器,內部由多個
      組成
      radio 單選項目
      slider 滑動選擇器
      switch 開關選擇器
      action-sheet action-sheet
      modal 模態彈窗
      toast 消息提示框
      loading 加載提示符
      navigator 頁面鏈接
      audio audio
      image image
      video 視頻
      map 地圖
      canvas 畫布
      這應該是類似于ng中的組件,目前小程序并沒有提供自定義組件的功能
      4.WXSS
      WXSS用于描述WXML的樣式表
      為了適應各種屏幕,WXSS擴展了尺寸單位rpx(responsive pixel),規定屏幕寬度為750rpx(20rem)
      另外,WXSS并不支持所有css選擇器,目前支持的選擇器有
      .class
      id
      element
      element,element
      :after
      :before
      5.數據綁定
      數據綁定采用 “Mustache” 語法(雙大括號)包裹變量
      <!--index.wxml-->
      <view class="container">
      <text></text>
      </view>
      //index.js//index.js
      Page({
      data: {
      hello: 'Hello World'
      },
      onLoad: function () {
      this.setData({
      hello:'Hello World'
      })
      }
      })
      WXML 中的動態數據均來自對應 Page 的 data,并且需要調用setData方法通知視圖數據變化
      6.條件渲染
      使用 wx:if=”” 來判斷是否需要渲染該代碼塊,同大多MV*框架一樣,if是惰性的,即初始判斷為false時,不會渲染該代碼塊
      <view wx:if=""> True </view>
      7.列表渲染
      使用wx:for綁定一個數組,wx:for-index可以指定數組當前下標的變量名(默認為index),wx:for-item可以指定數組當前元素的變量名(默認為item)
      <view wx:for="" wx:for-index="idx" wx:for-item="itemName">
      </view>
      8.模版
      使用name屬性定義一個 stemplate 模版,模版擁有自己的作用域
      <template name="msgItem">
      <view>
      <text>  </text>
      <text> Time:  </text>
      </view>
      </template>
      使用name屬性使用一個 stemplate 模版,data屬性傳入模版所需的數據
      < template is="msgItem" data=""></template >
      data
      Page({
      data: {
      item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
      }
      }
      })
      9.事件
      支持事件
      touchstart 手指觸摸
      touchmove 手指觸摸后移動
      touchcancel 手指觸摸動作被打斷,如來電提醒,彈窗
      touchend 手指觸摸動作結束
      tap 手指觸摸后離開
      longtap 手指觸摸后,超過350ms再離開
      事件綁定
      以key-value形式綁定事件
      其中key為 bind 或 catch +事件名稱,例如bindtap=“tapName”(bind不阻止冒泡,catch阻止事件向上冒泡)
      value為函數名稱
      事件對象
      type 事件類型
      timeStamp 事件生成時的時間戳
      target 觸發事件的組件的一些屬性值集合 id、dataset、offsetLeft,、offsetTop
      currentTarget 當前組件的一些屬性值集合 id、dataset、offsetLeft,、offsetTop
      touches 觸摸事件,觸摸點信息的數組 pageX、pageY、clientX、clientY、screenX、screenY
      detail 特殊事件所攜帶的數據,如表單組件的提交事件會攜帶用戶的輸入
      10.引用
      WXML 提供兩種文件引用方式import和include
      import可以在該文件中使用目標文件定義的template,但不能使用目標文件中import的其他template
      // index.wxml
      <import src="item.wxml"/>
      <template is="item" data=""/>
      include可以將目標文件中除了
      <!-- index.wxml -->
      <include src="header.wxml"/>
      <view> body </view>
      <include src="footer.wxml"/>
      <!-- header.wxml -->
      <view> header </view>
      <!-- footer.wxml -->
      <view> footer </view>
      11.路由傳參
      一個url如下
      <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
      在目標頁的聲明周期函數onLoad中傳入options即可獲取路由參數對象,另外url是相對的,不是app.json中定義的url
      Page({
      onLoad: function(options) {
      this.setData({
      title: options.title
      })
      }
      })
      API
      框架提供豐富的微信原生API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等,具體可查看官方文檔
      13.TodoList
      最后是一個案例
      顯示任務
      添加任務
      刪除任務
      標記任務是否完成
      計算任務總數和已完成的任務數量
      index.wxml
      <!--index.wxml-->
      <view class="input">
      <input bindinput="bindKeyInput" placeholder="請輸入任務名稱" value=""/>
      <button bindtap="add">確定</button>
      </view>
      <view class="list">
      <block wx:for="">
      <view>
      <checkbox-group bindchange="change" data-index="">
      <checkbox value="" />
      </checkbox-group>
      <text>">刪除</button>
      </view>
      </block>
      <view>
      個任務
      </view>
      </view>
      其中block并不屬于組件,不會在頁面中渲染,僅作接收控制屬性用
      index. wxss
      /**index.wxss**/
      .input {
      padding: 20 rpx
      }
      .list view {
      padding: 10 rpx 20 rpx;
      overflow: hidden
      }
      .list view text {
      display: inline - block;
      line - height: 92 rpx
      }
      .list view button {
      width: 200 rpx;
      display: inline - block;
      float: right
      }
      index.js
      //index.js
      Page({
      data: {
      list:[],
      complete:0
      },
      bindKeyInput:function(e){
      this.setData({
      inputValue:e.detail.value
      })
      },
      add:function(){
      var list = this.data.list;
      list.push({checked:false,value:this.data.inputValue});
      this.setData({
      list:list,
      inputValue:''
      })
      },
      delete:function(e){
      var list = this.data.list;
      list.splice(e.target.dataset.index,1)
      this.setData({
      list:list
      })
      this.com_task()
      },
      change:function(e){
      console.log(e.detail.value[0])
      var list = this.data.list;
      list[e.target.dataset.index].checked = !!e.detail.value[0]
      this.setData({
      list:list
      })
      this.com_task()
      },
      com_task:function(){
      var complete = 0,list = this.data.list;
      for(var i=0,len=list.length;i<len;i++){
      console.log(list.checked)
      if(list.checked!=false){
      complete++
      }
      }
      this.setData({
      complete:complete
      })
      }
      })
      list為任務列表,complete為已完成的任務數量
      頁面展示效果如下
      源碼 https://github.com/mistory/todolist 閱讀原文獲取

    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411

    QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 鞍山娱网棋牌 内蒙古11选5手机版一定牛 智能机选排列5 点石策略 欢乐麻将怎么作弊送豆 网赚兼职 陕西丫丫麻将亮六飞一 单机打麻将全部免费 山西快乐十分开奖结果 河内5分彩开奖图片 河内5分彩代理 天天福州麻将下载