<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          微信小程序知識體系梳理

          2018-3-9    seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里 

          小程序介紹

          17年一月9號,小程序剛發布的時候,個人很幸運的成為第一批吃螃蟹的人,當然也是第一批采坑的人。

          小程序是基于微信的一種應用,使用微信自定義的組件,讓我們使用JavaScript的方式,達到匹配原生應用的效果。小程序的一大優勢就是,你只要有個微信,你就能搜索你所需要的點餐、買票、旅游等一些日常需求的小程序,而且——用完即毀、無需下載。

          小程序開發所需要的技能

          小程序是最適合前端開發人員,你所需的知識僅僅是JavaScript、css、html的基本知識,如果你有其他單頁面應用的開發經驗,那小程序會很快上手,但是這都不是必須的。

          小程序的知識體系的梳理

          項目整體架構

          app.js 小程序的啟動js文件。

          app.json 小程序的全局json配置文件。同時也可以進行pages配置、底部tab切換的配置等等。

          app.wxss 小程序的全局樣式。

          pages 小程序的相關頁面。在app.json中配置了pages,pages文件夾就會自動出現對應的頁面。

          pages

          js 是小程序的邏輯部分。 
          wxss 小程序的對應page的布局,也就是局部樣式。相當于web網頁的css。 
          wxml 頁面布局。相當于web網頁的html。 
          json 小程序的局部頁面配置。

          小程序路由

          1、push路由 
          wx.navigateTo({ 
          url:’/pages/index/index’ 
          });

          2、替換路由 
          wx.redirectTo({ 
          url:”/pages/index/index” 
          });

          3、路由回退 
          wx.navigateBack({ 
          delta: 1 
          });

          4、tab切換 
          wx.switchTab({ 
          url:’相關頁面路徑’ 
          });

          5、路由清理替換 
          wx.reLaunch({ 
          url:’新的頁面路徑’ 
          });

          小程序路由傳參

          wx.navigateTo({ 
          url: “/pages/index/index?id=”+inputValue 
          }); 
          就會把inputValue的值傳遞過去。在相應的界面的onLoad周期函數的options中接收。

          //index.js 
          onLoad: function(options){ 
          console.log(options.id); 
          }

          小程序界面交互(Toast、Modal)

          Toast分三種:sucess、loading、none; 
          Modal:title、content屬性是必須要的。 
          modal還有一些其他的屬性,比如確認按鈕的顯示。

          小程序page的生命周期

          onLoad——初始化加載一次 
          onReady——頁面初次渲染完成 
          onShow——監聽頁面顯示 
          onHide——監聽頁面隱藏 
          onUnload——監聽頁面卸載

          生命周期函數的本質:給開發人員一個觸發時機的暴露的接口。在這樣的時機下,我們可以做什么?

          小程序如何更改data

          vue中:this.message = ‘hello world’; 
          小程序中: 
          this.setData({ 
          message: ‘hello world’ 
          })

          小程序分享功能

          使用onShareAppMessage函數可以實現分享轉發功能。 
          onShareAppMessage: function(){ 
          return { 
          title:’圖吧同行’, 
          path:’/pages/index/index’, 
          desc:’描述信息’ 

          }

          登錄功能

          小程序的登錄是一個項目的核心邏輯。分為三步。

          第一步:wx.login,獲取code。 
          第二步:把code發送給我們的后臺服務器,得到openId。 
          第三步:服務器把openId返回給你。你就知道每次是哪一個用戶登錄了小程序。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合