小程序開發的準備工做css
a) 郵箱註冊編程
b) 開發者配置與AppIDjson
c) https://mp.weixin.qq.com/小程序
d) 記住開發者ID微信小程序
a) 微信開發者工具緩存
a) 開發規範—目錄規範,命名規範,代碼規範微信
b) 目錄規範:utils(工具類), pages(頁面), components(組件類),thirdparty(第三方庫)網絡
c) 代碼規範:js語法,json語法,WXML和WXSS的一些約束微信開發
d) 交互規範--友好禮貌,清晰明確,便捷優雅,統一穩定app
項目工程的目錄介紹
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)
a) Pages目錄-------頁面相關代碼
b) Utils目錄--------工具相關代碼(網絡請求,文件操做等)
c) 其餘文件---------thirdparty,conponents,resources(小程序資源圖標等)
a) 全局入口-----------app.js
b) 全局配置----------app.json
c) 所有樣式----------app.wxss
小程序框架:
a) 全局配置------------app.json
i. Pages列表配置
ii. Windows屬性配置
iii. Tabbar配置
b) 頁面配置-----------<pages>.json
i. 只能配置全局配置中的window配置內容
ii. 當頁面配置和全局配置衝突時頁面配置會覆蓋全局配置中的window配置(能夠配置狀態欄,導航條,標題窗口背景顏色等等)
iii. 開啓下拉刷新
a) 小程序註冊邏輯
i. App函數
b) 頁面註冊邏輯
i. Page函數
ii. 頁面數據
a) 訪問:this.data.message
b) 修改:this.setData({})
a) 獲取全局惟一的App實例 const app = getApp()
b) 經過惟一實例獲取全局數據 var data = app.globalData
iii. 頁面生命週期(生命週期回調函數,觸發時機)
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
a) 網絡請求
i. HTTP請求
i. 文件上傳,下載
i. *Task(網絡任務對象)
b) 本地存儲
i. 將數據存儲在本地緩存中指定的key中,數據存儲生命週期根小程序自己一致
ii. Wx.setStorage Wx.getStorage wx.removeStorage wx.clearStorage
c) 文件系統
i. 全局文件管理器
ii. 文件的增刪改查
iii. 文件夾的操做
a) 用戶數據
i. 頭像,暱稱等公開信息----wx.getuserInfo()
ii. Openid等敏感數據
a) 推送消息
i. 基於微信的通知渠道,小程序框架爲開發者提升供了能夠高效觸達用戶的消息
b) 運營數據
i. 小程序管理後臺,數據分析
ii. 小程序數據助手
a) 視圖容器----view,scroll-view, swiper,cover-view
b) 基礎內容---text,icon,rich-test
c) 表單,導航---button,from,input
a) WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫
b) 微信官方設計團隊爲微信內網頁和微信小程序量身設計
c) 包含button,view等衆多元素
d) Github搜索weui-wxss獲取源碼
e) 手機預覽