本文主要記錄一下初次開發小程式一些注意事項，小程式開發語言，對小程式的稽核要求，小程式的特點，開發特點，後面會再寫下是否有三方好用的工具，及開發中遇到的js,html,css 相關的問題及解決方法。畢竟借小程式寫js,html,css，感謝小程式，讓我深深感到iOS開發環境xcode還是多麼好用的。

基礎瞭解

• 類目：

  • 不得超出小程式類目範圍，不得與其他小程式相似，不得與微信功能相似，如微信群聊，發紅包等。
  • 小程式所提供的所有服務類目功能，必須在小程式首頁得到體現，要求清晰的分辨出主要功能，弱化干擾項，次要內容

• 小程式大部分API和元件均屬前端範疇，但是前端開發的第三方可能支援前端但不支援小程式，比如bootstrap，網頁端的docment方法小程式中不能使用

• 通過編寫javascript/(w)xml/css實現邏輯，即開發語言要求瞭解：js;html;css

  • css教程
  • 小程式教程

• .js字尾的是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件

• 微信小程式的語音格式是silk

• 微信為小程式提供的開發框架為MINA框架，類似於Weex,Vue框架

• app.json不能新增任何註釋

• 每個頁面的“路徑+頁面名”都要寫到app.json 的pages中

• 所有頁面層級不能超過5層

• 頂部navigation bar上的icon無法自定義（甚至目前”…”裡面的操作也不能自定義）

• 頂部tab項不得超過4項

心得體會：純html/css效率不高啊標籤寫起來費時間，能視覺化拖動自動生成就好了，有相關工具的告訴我哈，但是修改由於頁面佈局分開還是很快

後續補充：網上有小程式模版，真的拖就可以了。。看我別的部落格有體驗介紹

開發過程中

由於專案中希望用到多個第三方js庫，而小程式開發工具本身並不支援，所以我們用webpack，babel開發小程式專案腳手架，集成了 dva-core.可在小程式環境下歡樂的使用redux…. 就是一堆前端的東西,所以我要去了解下面這些東西了

• 理解這個概念：資料驅動模型
• webpack：模組打包機，它做的事情是分析你的專案結構，找到js模組和預設的css，打包為合適的格式以供瀏覽器使用；
• npm
• Node.js ：是一個讓JS執行在伺服器端的開發平臺，本質上是js 的執行環境。官網：Nodes.org，用node 啟動web伺服器
• redux：針對JavaScript應用的可預測狀態容器,前端架構
• promise ：非同步程式設計
• MINA,Weex,Vue框架
• loader
• dva

參考博文：

心得體會：我已經不用微信開發工具了，換了VSCode，感覺編譯後自動同步到微信開發工具這種方式寫介面並不比開發工具好用。。還有看著上面的東西，感覺如果前端轉小程式開發一定 so easy.

開發中的部分問題及解決辦法，我有在小程式分類的部落格中記錄。。供參考

Html/css使用踩坑記錄：

1.圖片
a.使用base64編碼地址
例如：background-image: url( base64編碼後的圖片地址)
background-image 只能用網路url或者base64 . 本地圖片要用image標籤才行
b.圖片顯示不設定寬高則預設320*240，計算高度自適應及比例可以在標籤中使用 bindload=”繫結例項，計算高度的方法”，該bindload在圖片下載到後會呼叫。

2.包管理工具
關於yarn與npm install ,yarn 要快很多，解決了npm的一些缺陷問題，比如專案中的依賴同步問題。
相關介紹：一文看懂npm、yarn、pnpm之間的區別

3.自動滾動的坑
微信小程式API中給出的滾動方法：scroll-into-view = “{{要滾動到的元素id}}”,在使用中，如聊天資訊滾動，可能滾動到的資訊較長會展示不全，不能完全滾動到元素底部。
我這裡設定了滾動資料距底部的距離，資料顯示到那個高度就相當於觸底，這樣導致資料始終到底部有段距離，但是會完全顯示完全，並且可以全屏手動滾動。看某些聊天app也是如此效果，但是如果你有別的解決辦法，望不吝賜教留言。

4.wxml中可以使用三目運算子。
例如：class=”{{isBoss?’showBoss’:’noBoss’}}”
注意：這裡要分清單引號與雙引號，不能弄混淆

5.text,image,view等檢視標籤都可以新增點選
移動開發除了button 可點選，其他要新增手勢，從這點看移動開發弱了些

6.class中可以放多個樣式，空格寫就好

開發工具

• VSCode（有小程式的外掛可以用）
• 微信開發工具，除錯方法（單步除錯，資料檢視，）等。
  

  開發工具上很多真機上出現的問題，模擬器上不會出現。。另外，安卓和蘋果有些bug是隻有一端有。。再另外。。同為安卓或蘋果不同的手機出現的bug 也可能只有部分手機有。。。多測試真機。

其他

• TypeScript語法要求

安裝TypeScript：
> npm install -g typescript

執行ts編譯器,可以輸出一個同名js檔案
>tsc xxxx.ts

--
快捷鍵：

F12   跟蹤函式定義

-- -- 
[安裝ASP.NET Core](https://www.visualstudio.com/zh-hans/thank-you-downloading-visual-studio-mac/?sku=communitymac&rel=15&dotnetid=2108664613.1503281813&rr=https%3A%2F%2Fwww.microsoft.com%2Fnet)

• stackoverflow上的問題少。回覆也少。不過還是可能問了有人解答的。
• 小程式的翻譯:Mini Programes
• 開發真機預覽要開啟除錯
• webview對除錯基礎庫版本有要求

• 小程式註冊

• 小程式更新很快，基本直接看文件加度娘就可以上手了，開發工具也幾乎幾天一個版本。

• 網上有很多小程式原始碼，可以看看，看別人的書寫方法，使用方法等，也可以看效果來學習

• ES5基礎

• 入門Weex前需要了解一下知識，這樣能幫助你更快的掌握
  Node：Node.js 教程
  Vue：《Vue.js官方教程》
  ES6：《ECMAScript 6 入門》
  Vue是一套構建使用者介面的漸進式框架

• 這個也適合初學者快速入門：
  小程式,截圖如下
  

最後的吐槽

• 小程式不能過大，超過2M記憶體佔用，無法上傳，雖然可以壓縮，但是要有個大小的概念，領導非要做成大程式，其實也只能不斷壓縮，壓縮會導致的問題：開發不好除錯。

如何和領導溝通：

• 先看文件，對於明確說明的用文件說話：比如領導想webview和別的控制元件放到一個頁面，webview會自動鋪滿屏並覆蓋其他任何元件；領導想跳10級頁面，呵呵；
• 觀察下官方demo,有些問題是暫時不好處理的，比如官方demo的滾動擊穿？
• 複雜頁面的效能？卡不卡做出來領導自己體會去好了。。溝通起來比較累。。複雜程度怎麼看呢，比如我有個頁面，裡面有幾到幾十個滾動檢視，滾動檢視上面放富文字，富文本里面有文字，圖片，連結等。不要懷疑，我們就有一個這樣的頁面。。。偶爾卡到用來練習耐心

如何和設計師溝通：
建議先看這個：UI設計師必備！小程式設計規範來了！［內附sketch＋psd原始檔］
小程式使用單位是rpx,
小程式文件中有設計規範(同框不同尺寸)，字型設計有規範
頂部navigation bar上的icon無法自定義（甚至目前”…”裡面的操作也不能自定義），
其他最好要有PSD（PSD配合PXCook軟體,自動生成css程式碼，複製貼上來用就好了，尤其是一些複雜的樣式，省了去搜索找文件和除錯的時間了），尺寸規範（能得寸進尺的話我想要壓縮後的圖），在標準圖的基礎上，考慮非標準狀態（文字換行，沒有圖片，篇幅過長，），截效果圖給設計