1. 小程序介紹

相對於其他而言，有更好的體驗，便於微信規範管理，

無需安裝，用完即走，觸手可及

和移動應用相比，不占內存且容易傳播，

移動應用能做的，小程序基本也可以做到

---------------------------------------------------------

2. 開發前準備

01.註冊賬號

點擊https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　02. 安裝開發工具

鏈接 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

---------------------------------------------------------------------------------------------------------------------------

3. 個人對小程序的看法

相對於前端常用的html,css,js來說，小程序是 微信 對前端三劍客的 又一次封裝；

html 變成 wxml ;

css ---> wxss;

js ---> 還是js,但是稍微有些不同

------------------------------------------------------------------------------------------------------------------------------

4. 微信原生小程序開發 代碼結構

config ----> 存放一些基本的 配置信息（個人喜好） ，比如請求地址 等等；

pages ----> 項目中所有的界面

utils ----> 工具函數，一般是由開發者自己實現，用於代碼復用

app.js ---> 相當於入口文件，註冊整個應用

app.json ----> 全局配置

app.wxss ----> 全局樣式

---------------------------------------------------------------------------------------

5. 常用配置介紹

 1 {
 2     "pages": [ //頁面路由
 3         "pages/books/books",
 4         "pages/my/my",
 5         "pages/myBooks/myBooks",
 6         "pages/detail/detail",
 7         "pages/comment/comment"
 8     ],
 9     "window": { // 外觀
10         "backgroundTextStyle": "light",
11         "navigationBarBackgroundColor": "#f2f2f2",
12         "navigationBarTitleText": "WeChat",
13         "navigationBarTextStyle": "black",
14         "enablePullDownRefresh": false
15     },
16     "tabBar": { // 底部導航欄
17         "list": [{
18             "pagePath": "pages/books/books",
19             "text": "書架",
20             "iconPath": "images/book.png",
21             "selectedIconPath": "images/bookSelected.png"
22         }, {
23             "pagePath": "pages/my/my",
24             "text": "我的",
25             "iconPath": "images/my.png",
26             "selectedIconPath": "images/mySelected.png"
27         }],
28         "color": "#bfbfbf",
29         "selectedColor": "#1AAD19"
30     },
31     "networkTimeout": { // 網絡超時
32         "request": 3000
33     }
34 }

6. 原生開發框架也是框架，和vue 一樣的套路

***沒有dom操作，只用關心數據的變化***

　數據綁定---> 插值語法 {{}}

1 <view class="book-info">
2                              <text class="book-name">{{item.book_name}}</text>
3                              <text class="author">{{item.author}}</text>
4                              <text class="publisher">{{item.book_publisher}}</text>
5                          </view>

小程序知識總結-分享