作為小程序初學(xué)者，來記錄一下這幾天自己的學(xué)習(xí)成果，兩個Demo，一個是美食菜譜，一個生活服務(wù)，用的都是開源接口
代碼傳到GitHub了,地址:https://github.com/LvXin1
另外附上幾張效果圖
1 、注冊小程序賬號
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1534489446
微信公眾平臺上都有詳細介紹
2、下載開發(fā)工具
學(xué)習(xí)怎么使用，微信公眾平臺上都有詳細介紹
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=18080816
3、新建小程序項目
1）如果你沒有完成開發(fā)設(shè)置，沒有生成APPID，那么你在新建項目時可以不填A(yù)PPID選擇使用小程序測試號
2）如果你已經(jīng)完成開發(fā)設(shè)置，生成了APPID，那么可以直接復(fù)制。
4、項目構(gòu)建
1）小程序整體項目公共配置在app.json文件里，各個頁面單獨的配置在自己的json文件里，app.json文件可以配置頂部瀏覽器功能條背景顏色，配置tab導(dǎo)航（位置可以放頂部也可以放底部）
注意:程序啟動默認的第一個頁面，就是app.json的pages中的第一個頁面哦。
2)app.js整個項目的啟動文件，onLaunch有三大功能 展示本地存儲能力、登錄、獲取用戶信息，另外還可以將頁面公用信息存到app.js里某個對象上，然后再其他頁面獲取一個app實例 var app = getApp()，即可用app.**來調(diào)用。如果要使用util.js工具庫中的某個方法，在util.js中module.exports導(dǎo)出，然后在需要的頁面中require即可得到哦。
3）每個頁面頂層的DOM都為page，若要固定頁面大小為瀏覽器寬高。一定先為page標簽添加樣式。同樣每個頁面都由一個Page方法來渲染，他里面的data即為整個頁面需要綁定的數(shù)據(jù)和vue，react類似。也有生命周期函數(shù)。
5.開發(fā)項目中自己遇到的問題
1）data數(shù)據(jù)只有用setData方法來更改時才會在頁面上顯示變化；
2）onLoad這個生命周期函樹就可以接收到頁面地址欄參數(shù)；
3）傳參，事件傳參只能通過在標簽內(nèi)為data開頭屬性賦值，如：data-id = “{{id}}”，然后再事件函數(shù)里用e.currentTarget.dataset.id 來獲取；頁面?zhèn)鲄⒓丛诘刂泛竺嫫唇蛹纯伞?br>
4）class 樣式動態(tài)添加，和VUE寫法不一樣，
一個類名的情況下<view class="{{selsectState[0]?'newsSelected':''}}" bindtap='clickNation'>
多個類名情況<view class="nav {{selsectState[0]?'newsSelected':''}}" bindtap='clickNation'>
5)CSS多行省略在微信小程序里平時的寫法行不通，必須加整體高度來控制
//正常
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp:3;//控制行數(shù)
display: -webkit-box !important;
word-break: break-all;
-webkit-box-orient: vertical;
//微信
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
text-overflow:ellipsis;
height:126rpx;//必須加行高
6）scroll-view組件scroll-top等等的值單位都為px
且scroll-view標簽樣式white-space:nowrap,它的子元素display:inline-block;
7)頁面上拉加載更多下拉刷新，不要用scroll-view來實現(xiàn)，要用頁面配置來實現(xiàn)，"enablePullDownRefresh":true設(shè)置為true代表開啟上拉加載下拉刷新功能，然后配合onPullDownRefresh（下拉加載）、onReachBottom（上拉刷新）兩個方法來實現(xiàn)。（這個功能我在美食菜譜項目首頁里面實現(xiàn)了）
8）使用wx.SwitchTab跳轉(zhuǎn)tab頁的話，在app.json中除了注冊pages頁面，還需要在tabBar中注冊tab頁，才能生效哦。
注意：tab最多5個，也就是我們說的頭部或者底部最多5個菜單。其他的頁面只能通過其他路由方法打開哦。
9）reLaunch跳轉(zhuǎn),新開的頁面左上角是沒有退回按鈕的，生活圈項目天氣頁面切換城市的時候用到。
10)事件對象event，event.target和event.currentTarget的區(qū)別：
target指的是當前點擊的組件 和currentTarget 指添加事件的組件。
6.發(fā)布上線
微信小程序要想發(fā)布，接口必須都為HTTPS請求，這就要求你在開發(fā)的時候選取的開源接口必須是https的，我一開始做了一個美食菜譜的小程序。里面用的聚合數(shù)據(jù)（https://www.juhe.cn/）的http開源接口，最后發(fā)布的時候發(fā)現(xiàn)必須是HTTPS請求，無奈又寫了一個。你可以選擇自己寫造假接口，例如用Easy Mock(https://easy-mock.com/)或者YApi(https://yapi.ymfe.org/index.html),也可以像我一樣找各種開源HTTPS接口，最后將你用到的的HTTPS接口配置在這里。
開發(fā)的時候如果沒有配置你需要點擊詳情，將最底部不校驗合法域名勾選
結(jié)尾:
現(xiàn)在只想到這么多，就不在記錄了。也由于時間關(guān)系，這兩個項目功能都不完整，代碼書寫欠缺，后續(xù)有時間了，我會補上并加以修正。
