版權聲明：未經博主允許不得轉載
前言：
學習微信小程序應該不怎么難吧~下面我來記錄一下學習筆記，在學微信小程序的時候，如果你有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實時音視頻錄制
如果覺得不錯，那就點個贊吧！❤️
我的目標是——每天不斷更