微信小程式框架與組件

版權聲明：未經博主允許不得轉載

前言：

學習微信小程式應該不怎麼難吧~下麵我來記錄一下學習筆記，在學微信小程式的時候，如果你有html+css+javascript的基礎，那麼你就很快地上手掌握的。下麵提供微信小程式官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

下麵一起學一學，微信小程式的框架吧~看文檔，別學別理解。在下的講述如果不正確的話，可以參考官方文檔，也可以幫忙改正。具體還得看官方文檔。

正文：

微信小程式的文件結構，有一個描述整體的app和描述多個頁面的文件組合在一起的。給大家看一下打開微信小程式一般由什麼：

一個文件項目中主體有

app.js 為小程式的邏輯代碼
app.json 為小程式的公共設置
app.wxss 為小程式的樣式

一個文件中如logs,index等，一般都有

xxx.js 頁面邏輯代碼如JavaScript
xxx.wxml 如html
xxx.wxss 如css樣式
json 為該頁面的配置

在app.json中的代碼，我提供的代碼是剛創建時的代碼模塊：

{
  //這部分為頁面的路徑
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //視窗表現
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在文檔中還提供了tabBar，networkTimeout等。
tabBar

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  }

networkTimeout網路超時

"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

window的屬性：

（navigationBar-BackgroundColor）
navigationBarBackgroundColor為導航欄的背景顏色
（navigationBar-TextStyle）
navigationBarTextStyle為導航欄標題顏色
僅支持 black/white
（navigationBar-TitleText）
navigationBarTitleText為導航欄標題文字內容
navigationStyle為導航欄樣式
僅支持 default/custom
backgroundColor視窗的背景色
backgroundTextStyle下拉 loading 的樣式，僅支持 dark/light

tabBar可以切換頁面（最少2，最多5）

color文字顏色
selectedColor文字選中時的顏色
backgroundColor背景色
borderStyle 僅支持 black/white

iconPath
selectedIconPath

networkTimeout設置各種網路請求

wx.request
wx.connectSocket

xxx.json：

navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
等

App()
用來註冊小程式。生命周期函數

onLaunch
onShow
onHide
onError

object參數說明：

data:初始數據
生命周期函數
onLoad
onReady
onShow
onHide
onUnload

組是視圖的基本組成單元。
知識點：
數據綁定

Page({
  data: {
    ...
  }
})

列表渲染：

<view wx:for="{{array}}"> {{item}} </view>

條件渲染
模板

數據綁定

{{ message }}

"{{flag ? true : false}}"

wx:for

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
//wx:for="{{[1, 2, 3]}}"
 <view> {{index}}: </view>
 <view> {{item}} </view>

提供兩種文件引用方式import和include。

標識符

delete 
void 
typeof

null 
undefined 
NaN 
Infinity 
var

if 
else 

true 
false

require

this 
function 
arguments
return

for
while
do
break
continue
switch
case
default

數據類型

1. number ： 數值
toString
toLocaleString
valueOf
toFixed
2. string ：字元串
3. boolean：布爾值
toString
valueOf
4. object：對象
5. function：函數
6. array : 數組
7. ate：日期
8. regexp：正則

選擇器

view::after 在 view 組件後邊插入內容
view::before    在 view 組件前邊插入內容

組件

view視圖容器
scroll-view滾動視圖
swiper滑塊視圖容器
movable-area可移動區域
movable-view可移動的視圖容器
cover-view覆蓋在原生組件之上的文本視圖
cover-image覆蓋在原生組件之上的圖片視圖
rich-text富文本
label用來改進表單組件的可用性
picker從底部彈起的滾動選擇器
picker-view嵌入頁面的滾動選擇器
navigator頁面鏈接
functional-page-navigator用於跳轉到插件功能頁
live-player實時音視頻播放
live-pusher實時音視頻錄製

如果覺得不錯，那就點個贊吧！❤️
我的目標是——每天不斷更