微信小程序與Django<一>

小程序開發的准備工作

1. 1.       小程序開發者賬號

a)         郵箱注冊

b)         開發者配置與AppID

c)         https://mp.weixin.qq.com/

d)         記住開發者ID

1. 2.       小程序集成開發環境

a)         微信開發者工具

1. 3.       小程序開發規范

a)         開發規范—目錄規范,命名規范,代碼規范

b)         目錄規范:utils(工具類), pages(頁面), components(組件類),thirdparty(第三方庫)

c)         代碼規范:js語法,json語法,WXML和WXSS的一些約束

d)         交互規范--友好禮貌,清晰明確,便捷優雅,統一穩定

項目工程的目錄介紹

1. 1.       小程序的文件類型

a)         .Wxml(結構):

                         i.              標簽名稱<div> ===> <view>

                       ii.              Wx:if, wx:for,{{}}

b)         .Wxss(表現)

                         i.              具備css的大部分屬性

                       ii.              新增尺寸單位(主要是為了適配移動端)

                      iii.              全局樣式和局部樣式

c)         .js(行為)

                         i.              本色出演

d)         .json(配置)

                         i.              工具配置(project.config.json)

                       ii.              項目配置(app.json)

                      iii.              頁面配置(<page name>.json)

1. 1.       小程序目錄說明

a)         Pages目錄-------頁面相關代碼

b)         Utils目錄--------工具相關代碼(網絡請求,文件操作等)

c)         其他文件---------thirdparty,conponents,resources(小程序資源圖標等)

1. 2.       小程序的全局入口,配置與樣式

a)         全局入口-----------app.js

b)         全局配置----------app.json

c)         全部樣式----------app.wxss

小程序框架:

1. 1.       小程序的配置

a)         全局配置------------app.json

                         i.              Pages列表配置

                       ii.              Windows屬性配置

                      iii.              Tabbar配置

b)         頁面配置-----------<pages>.json

                         i.              只能配置全局配置中的window配置內容

                       ii.              當頁面配置和全局配置沖突時頁面配置會覆蓋全局配置中的window配置(可以配置狀態欄,導航條,標題窗口背景顏色等等)

                      iii.              開啟下拉刷新

1. 2.       小程序的邏輯

a)         小程序注冊邏輯

                         i.   App函數

1. 1. 1. 注冊全局唯一的小程序
      2. 只能調用一次
      3. 接受一個對象作為函數參數

b)     頁面注冊邏輯

                         i.   Page函數

1. 1. 1. 注冊一個頁面
      2. 接受一個對象作為函數參數

                       ii.    頁面數據

1. 1. 1. Data屬性 如data:{message:”hello world”}

a)         訪問:this.data.message

b)         修改:this.setData({})

1. 1. 1. 使用全局數據

a)         獲取全局唯一的App實例 const app = getApp()

b)         通過唯一實例獲取全局數據 var data = app.globalData

                      iii.    頁面生命周期(生命周期回調函數,觸發時機)

1. 1. 1. onLoad 生命周期回調監聽頁面加載
      2. onShow 生命周期回調監聽頁面顯示
      3. onReady 生命周期回調監聽頁面初次渲染完成
      4. onHide 生命周期回調監聽頁面隱藏
      5. onUnload 生命周期回調監聽頁面卸載
      6. onPullDownRefresh 監聽用戶下拉動作
      7. onReachBottom 頁面上拉觸底事件的處理函數
      8. onResize 頁面尺寸改變時觸發
      9. onTabItemTab 當前是tab頁時,點擊tab時觸發
2. 3.       小程序的視圖層

a)         數據綁定

                         i.              語法{{}} <view>{{ message }}</view>   Page({data:{message:’hello word’}})

b)         列表渲染

                         i.              語法:wx:for <view wx:for =”{{array}}”>{{index}}:{{item.messgae}}(這個是小程序框框架約定俗成的)</view>

Page({data:{array:[{message:’foo’}]}})

c)         條件渲染

                         i.              語法：wx：if，wx：elif，wx：else

<view wx:if=”{{length > 5}}”> 1</view>

<view wx:elif=”{{length > 5}}”>2</view>

<view wx:else=”{{length > 5}}”> 3</view>

d)        綁定事件(頁面事件，觸發時機)

                         i.              Tap 手指接觸后馬上離開

                       ii.              Longpress 手指接觸后，超過350ms在離開（推薦使用）

                      iii.              Longtap 手指觸摸后，超過350ms在離開

                      iv.              Touchstart 手指觸摸動作開始

                       v.              Touchend 手指觸摸動作結束

                      vi.              事件綁定的寫法以key，value的形式

                    vii.              Key以bind或catch開頭，然后跟上事件的類型

                   viii.              <view id=”tapTest” data-hi=”WeChat” bindtap=”tapName”> Click me！</view>

Page（{tapName：function(event)}）{console.log(event)}

小程序框架：

　　

 

　　

 

 

 

 

小程序提供的能力和常用API

1. 1.       微信API

　　　　　　a)         網絡請求

                        　　　　 i.       HTTP請求

　　　　　　　　　　　　　　

 

 

 

                         　　　　i.       文件上傳，下載

　　　　　　　　　　　　　　

 

 

 

 　　　　　　　　　　　　　　

 

 

 　　　　　　　　

                      

                         i.      *Task（網絡任務對象）

1. 1. 1. 異步任務提交以后，需要對任務進行操作時，使用Task對象
      2. 包含：RequestTask  UploadTask  DownLoadTask  SocketTask
      3. 中斷任務
      4. 觸發回調函數
      5. 關閉連接

b)         本地存儲

                         i.               將數據存儲在本地緩存中指定的key中，數據存儲生命周期根小程序本身一致

                       ii.              Wx.setStorage  Wx.getStorage  wx.removeStorage  wx.clearStorage

c)         文件系統

                         i.              全局文件管理器

1. 1. 1. 1. 1. 獲取全局唯一的文件管理器 var fs  wx.getFileSystemManager()

                       ii.              文件的增刪改查

1. 1. 1. 1. 1. 對文件進行操作的API有很多，完全覆蓋編程語言對文件的各種操作
            2. Fs.saveFile fs.removeSavedFile fs.writeFile fs.appendFile fs.readFile

                      iii.              文件夾的操作

1. 1. 1. 1. 1. Fs.mkdir fs.rmdir fs.isDirectory fs.isFile

1. 1.       開放能力

a)         用戶數據

                         i.              頭像，昵稱等公開信息----wx.getuserInfo()

                       ii.              Openid等敏感數據

　　　　　　

 

 

a)         推送消息

                         i.              基於微信的通知渠道，小程序框架為開發者提高供了可以高效觸達用戶的消息

b)         運營數據

                         i.              小程序管理后台，數據分析

                       ii.              小程序數據助手

 

1. 1.       基礎組件

a)          視圖容器----view，scroll-view, swiper,cover-view

b)         基礎內容---text，icon，rich-test

c)         表單，導航---button，from，input

1. 2.       WeUI-WXSS組件：

a)         WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫

b)         微信官方設計團隊為微信內網頁和微信小程序量身設計

c)         包含button，view等眾多元素

d)         Github搜索weui-wxss獲取源碼

e)         手機預覽