什么是微信小程序:

小程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個(gè)小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。

微信小程序官網(wǎng)(微信公眾平臺(tái)): https://mp.weixin.qq.com/ 
微信小程序開發(fā)文檔 
微信開發(fā)者工具下載地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

微信開發(fā)者工具的使用

1.安裝好微信開發(fā)者工具后,點(diǎn)擊打開. 

2.用手機(jī)的微信掃一掃掃碼登陸. 

3.選擇本地項(xiàng)目: 

4.添加項(xiàng)目 

5.添寫項(xiàng)目名稱,選擇存放目錄 

6.進(jìn)到主屆面,我們可以添加修改刪除自己目錄或文件. 

每個(gè)文件更改后都要按command+s保存再進(jìn)行編譯. 
調(diào)試—Console:打印log 
調(diào)試—Sources:源碼 
調(diào)試—Network:網(wǎng)絡(luò) 
調(diào)試—Storage:緩存(本地?cái)?shù)據(jù)庫) 可以點(diǎn)擊左邊欄的緩存按鈕清除緩存. 
調(diào)試—AppData:程序的數(shù)據(jù). 
左邊欄后臺(tái)按鈕,模擬小程序在后臺(tái)運(yùn)行.

導(dǎo)入已有項(xiàng)目

項(xiàng)目目錄選擇你要導(dǎo)入的項(xiàng)目即可.項(xiàng)目名稱可以寫成和要導(dǎo)入項(xiàng)目的名稱一樣.也可以不一樣. 

目錄結(jié)構(gòu)

編輯—app.json 
pages數(shù)組里面是頁面的路徑,對應(yīng)的是pages里面的文件夾,一個(gè)文件夾是一個(gè)頁面. 
每個(gè)頁面必須包含一個(gè) .js 文件 和一個(gè) .wxml文件. 
.js文件配制頁面的入口. 
.wxml文件配制布局與UI 
.json是頁面的配置文件 
.wxss是頁面的樣式文件

1. {
2. "pages":[//頁面:是個(gè)數(shù)組(這里對應(yīng)的兩個(gè)頁面.
3. "pages/index/index",//index頁面的路徑
4. "pages/logs/logs"//logs頁面的路徑
5. ],
6. "window":{
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#fff",
9. "navigationBarTitleText": "WeChat",
10. "navigationBarTextStyle":"black"
11. }
12. }

創(chuàng)建一個(gè)空的項(xiàng)目

不要勾選下方的復(fù)選框. 

一.新建App.json文件 

二.新建src源碼目錄.  1.在src目錄下新建頁面pages目錄  2.在pages目錄下新建index目錄.  3.在index目錄下新建頁面index.js和index.wxml  三.新建app.js文件 

四.我們在頁面的布局.wxml文件中輸入要顯示的內(nèi)容 

五.在頁面入口index.js中輸入(頁面的配制)

1. Page({
2. data:{
3.  
4. },
5. onLoad:function(options){
6. // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
7.  
8. },
9. onReady:function(){
10. // 頁面渲染完成
11.  
12. },
13. onShow:function(){
14. // 頁面顯示
15.  
16. },
17. onHide:function(){
18. // 頁面隱藏
19.  
20. },
21. onUnload:function(){
22. // 頁面關(guān)閉
23.  
24. }
25. })

在程序入口app.js中輸入

1. App({
2. onLaunch: function () {
3. console.log('App Launch')
4. },
5. onShow: function () {
6. console.log('App Show')
7. },
8. onHide: function () {
9. console.log('App Hide')
10. }
11. })

在app.json中輸入(程序的配制)

1. {
2. "pages": [
3. "src/pages/index/index"
4. ]
5. }