微信小程序與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)         手機預覽