里整理的內容大致劃分四個部分

①常規選型

②靜態頁面

③接入Bmob數據庫

④發布小程序

⑤個人開發過程的筆記。

1.小程序開發官方文檔

①簡易教程https://developers.weixin.qq.com/miniprogram/dev/

②組件：https://developers.weixin.qq.com/miniprogram/dev/component/

③API：https://developers.weixin.qq.com/miniprogram/dev/api/

2.WEUI（UI組件這里選的WEUI）

①樣式瀏覽：https://weui.io/

②對應樣式的源碼：https://github.com/Tencent/weui-wxss

3.Iconfont：https://www.iconfont.cn

4.Bmob數據庫

①如何在小程序中使用文檔：http://doc.bmob.cn/data/wechat_app_new/index.html

②Bmob后端云（登錄進去就可以建項目的數據庫了）：https://www.bmob.cn/

1.使用WEUI準備工作

①到官網https://github.com/Tencent/weui-wxss把weui項目clone到本地。

②解壓縮-進入weui-wxss-master\dist\style文件夾-找到weui-wxss-master\dist\style\weui.wxss文件

③把weui.wxss文件復制到你的小程序項目根目錄下面即可，開發工具上就可以看到

④在項目中引用：在app.wxss中加入weui.wxss的引用 @import ‘weui.wxss’;

⑤在項目中使用即可（可以打開https://weui.io/找到自己要的樣式，對應https://github.com/Tencent/weui-wxss這里可以找到參考代碼）

2.使用iconfont準備工作

①進入官網https://www.iconfont.cn

②iconfont使用手冊

搜圖標

添加入庫

點擊右上角的購物車-添加至項目

點擊下載到本地

③將下載的download解壓縮-找到 iconfont.css 文件，將里面的內容全部復制到小程序的app.wxss里面

注意：如果你又在iconfont里面添加了新的圖標、是要更改這個文件的！！

首先是在你的項目里面查看代碼，會提示你新增了圖標要刷新看代碼了

把這段代碼復制到app.wxss中，位置就是@font-face{..}這段，同時下面要添加你的圖標定義。

④使用iconfont

<text class='iconfont icon-hongbao'>抽獎</text>

效果如圖：

3.目錄結構。（images存放靜態圖片等，pages就是你的功能頁面【xx.js文件寫事件數據邏輯、xx.wxml寫頁面、xx.wxss寫樣式】）

4.寫代碼邏輯

我的靜態的代碼在這里，可以參考借鑒（順手求個start感謝）：https://github.com/GugaLiz/GamePunishment/tree/master

接入Bmob數據庫實現動態數據

1.注冊登錄Bmob后端云-->創建數據庫（添加應用）-->添加表（都是傻瓜式添加操作，務必按下面參考資料走，非常詳細簡單）

參考資料走一波：http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html#注冊Bmob帳號

2.查看官方操作文檔（http://doc.bmob.cn/data/wechat_app_new/index.html#_15）把要增刪查改到數據庫的數據打通

我的使用案例：

①引入Bmob.js到小程序項目

②在要用Bmob的頁面聲明及使用

比如在我的redPackagesDetail.js

聲明：

var Bmob=require("../../utils/dist/Bmob-1.6.7.min.js");

var query=Bmob.Query("result");

查找數據：

query.equalTo("userName", "==", options.userName);

query.find().then(res=> {

me.setData({

details: res

})

});

發布小程序

1.提交代碼

小程序開發工具-右上角“上傳”

2.提交審核

①設置你的小程序信息

小程序頁面-設置-基本設置

②提交審核（要填你的功能頁面信息，盡量把大頁面的填好填滿，不然會打回重新審核）

小程序頁面-管理-版本管理-審核版本

③如果有打回，按照他反饋信息進行修改，再提交審核即可。

過程中遇到瑣碎筆記

1.tabBar添加（我寫的這個后來修改了設計就沒有使用tarBar）

在app.json文件中添加代碼

"tabBar": {

"color": "#dddddd",

"selectedColor": "#13227a",

"borderStyle": "white",

"list": [

{

"pagePath": "pages/index/index",

"iconPath": "images/index.png",

"selectedIconPath": "images/indexSel.png",

"text": "首頁"

},

{

"pagePath": "pages/setting/setting",

"iconPath": "images/setting.png",

"selectedIconPath": "images/settingSel.png",

"text": "設置"

}

]

}

2.頁面跳轉的方式：

方式一：wx.navigationTo({url:''});自帶后退功能的

頁面 index.wxml

<button class="weui-btn" type="default" plain="true" bindtap="packageEnter">抽獎</button>

頁面 index.js

packageEnter:function(){
 wx.navigateTo({
 url: '../redPackage/redPackage'
 })
 },

方式二：在.wxml文件中直接寫跟html的<a></a>標簽類似

<navigator url='../redPackagesSetting/redPackagesSetting'>跳轉</navigator>

<view class="setting">
 <navigator url='../redPackagesSetting/redPackagesSetting'>
 <text class='iconfont icon-shezhi' style="color:#FFB1B0;font-size:25px;" >
 </text>
 </navigator> 
 </view>

方式三：帶參數跳轉頁面 <navigator url="../redPackagesDetail/redPackagesDetail?userName={{item.userName}}">GugaLiz</navigator >

wxml頁面

<view wx:for="{{counts}}" wx:key="index">
 <navigator url="../redPackagesDetail/redPackagesDetail?userName={{item.userName}}">
 <view class="weui-cells weui-cells_after-title">
 <view class="weui-cell weui-cell_access">
 <view class="weui-cell__bd">
 <view style="display: inline-block; vertical-align: middle;width:50%;">{{item.userName}}</view>
 <view class="weui-badge" style="margin-left: 5px;">共{{item._sumMoney}}元</view>
 </view>
 <view class="weui-cell__ft weui-cell__ft_in-access" style="font-size: 0" >
 <view style="display: inline-block;vertical-align:middle; font-size: 17px;" >詳細</view>
 <view class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;" ></view>
 </view>
 </view>
 </view>
</navigator>
 </view>

js頁面

Page({
 /**
 * 頁面的初始數據
 */
 data: {
 counts:[{userName:"GugaLiz",_sumMoney:2},{userName:"Echo",_sumMoney:12}]
 },
 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function (options) {
 console.log(options.userName); //輸出url帶過來的參數
 },
})

其它（參考官方文檔的API）：https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html

近華為牽頭國內幾大廠商推出了Quikapp快應用，與微信小程序展開了入口之爭，作為走在時代最前沿的程序猿，不了解一下，不動手操作一下，都對不起時代賦予我們的責任感了。來，跟我一起來探究探究快應用的開發之路。

一、首先記住幾個網站：

1.快應用官網：

https://www.quickapp.cn

2.快應用后端支持網站：

www.bmob.cn

3.文檔：

https://doc.quickapp.cn/

4.工具：

使用Visual Studio Code開發

使用WebStorm開發

教程地址（https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html）

5.環境：

需安裝6.0以上版本的NodeJS，請從NodeJS官網下載

6依賴庫

hap-toolkit、hap-tools

二、從0到1的操作過程

第一步：安裝

npm install -g hap-toolkit

安裝

第二步：hap腳手架生成一個初始項目

hap init test1

這一步大家別急著

npm run server

否則報一下錯誤

第三步：安裝依賴

npm install

第四步：運行服務

npm run server

還是失敗，新出的東西官網還不是很完善，后面應該不會出現，這里花了幾分鐘找到了原因，項目少了hap-tools庫， 這里沒看到官網有這個庫的介紹，package.json里也沒 ap-tools 這個庫的引入。

大家輸入npm install hap-tools 手動安裝下這個庫。

然后

npm run server

注：

開發者可以通過命令行終端或者調試服務器主頁看到提供*

掃描的二維碼

開發者通過快應用調試器掃碼安裝按鈕，掃碼安裝待調試的rpk文件

開發者點擊快應用調試器中的開始調試按鈕，開始調試

完美！

三、給大家解釋下目錄說明

大家像開發微信小程序一樣，在這上面開發就好了。

Quikapp快應用基于Nodejs內建一個本地服務器運行代碼、語言JavaScript，語法支持ES6，如果熟悉vue\weex一類的MVVM框架，基本可以直接入手。

這一章是Quikapp快應用開發入門，有空補上下一章編寫第一個快應用。

四、最重要的問題，快應用后端怎么辦？

Quikapp快應用、告訴你，可以直接接入Bmob后端云！！！

既然語言是JavaScript， 直接下載Bmob的JavaScript SDk引入，就可以直接操作后端數據庫，配合云函數可以實現Quikapp快應用的接口對接。很快Bmob也會推出快應用的針對性SDK，這樣云函數也不需要寫了，跟微信小程序一樣無需寫一行后端代碼，愉快的對接Quikapp快應用了。

膩害吧！！！

總體而言，華為快應用還處在初期，盡管有些地方還不夠完善，但不可否認，它有其獨到的優勢，也為開發者提供了更為廣闊的空間，期待ing!!!

.聚合數據

鏈接：http://www.juhe.cn/

大家在開發過程中，可能會用到各種各樣的數據，想找一些接口來提供一些數據。比如天氣預報查詢，火車時刻表查詢，彩票查詢，身份證查詢等等。有了這個接口，直接調用即可。各種各樣的API接口滿足你。

2.Git

鏈接：http://git-scm.com/

還在擔心自己辛辛苦苦寫的代碼被誤刪了嗎？還在擔心自己改錯了代碼不能挽回嗎？還在苦惱于多人開發合作找不到一個好的工具嗎？那么用Git就對了，Git是一個開源的分布式版本控制系統，用以有效、高速的處理從很小到非常大的項目版本管理。有了它，代碼托管不是問題，版本控制不再苦惱，多人開發變得簡單易行。

3.GitHub

鏈接：https://github.com/

學會了Git之后，我們把代碼托管到哪里呢？在此推薦給大家兩個網站，GitHub，一個是國外免費的代碼托管平臺。許許多多的開源項目幾乎都托管在上面，你也可以在上面搜一些你需要的源代碼，豐富資源應有盡有，如果還不知道這個，是不是已經Out了呢？

4.GitCafe

鏈接：http://gitcafe.com/

和GitHub一樣，也是一個免費的代碼托管平臺。GitHub是國外的，GitCafe是國內的。兩者功能幾乎相同，不喜歡英文版的朋友可以來GitCafe嘗嘗鮮。

5.七牛云存儲

鏈接：http://www.qiniu.com/

還在為自己項目的圖片等資源沒處存放而著急嗎？還在擔心圖片加載耗費你主機大量流量嗎？還在為你自己的網站加載速度過慢而揪心嗎？云時代，就要用云存儲。

比如我有一個虛擬主機是每月限流量的，而大量的圖片加載占據了我網站訪問流量的大部分，這時我們就可以考慮將圖片移植到七牛云存儲上，圖片通過七牛來加載，節省寶貴的主機空間和流量。比如我的個人網站已經移植到了七牛，所有網頁圖片的加載都是從七牛上獲取，速度快而且省流量。而且免費的七牛還提供了圖片處理，比如壓縮，水印等各種圖片加工方式，想要什么有什么。

6.云適配

鏈接：http://www.yunshipei.com/

有時候我們做出的網站沒有用到響應式布局，也可能我們的網站DIV的像素寬度已經規定成具體的多少像素了。所以，用手機訪問的時候可能就會出現這樣那樣的問題，或者顯示得很小，或者整個布局全都亂掉了。這時，我們需要把自己的網站適配一下，那么在此推薦一個網站，云適配。插入一行代碼，通過在線修改和生成手機適配效果，得到手機訪問的網頁最佳適配效果，方便而又快捷。這時電腦和手機均能看到最佳適配效果了。

7.夠快云庫

鏈接：http://www.gokuai.com/

夠快云庫，是基于云存儲的團隊協作性文件管理平臺。

團隊成員可以同步共享資料，即時溝通交流，便捷移動辦公，從而實現團隊的100％高效運作。比如團隊開發過程中有什么要共享的資料，就可以放到里面。支持在線編輯和修改，小組討論合作等方式。

8.SAE

鏈接：http://sae.sina.com.cn/

SAE的強大不用多說了，強大的虛擬主機提供商。提供各種各樣的編程語言在線運行，同時提供云存儲Storage，各種數據庫，應用十分廣泛。不僅提供代碼托管，還提供在線服務器運行，JAVA，PHP，Python等等的支持應有盡有，在這里你可以假設你自己的網站，你的應用接口，你的創意應用。好不好，用用就知道。另外還有JAE（京東），BAE（百度），功能類似，也推薦一下。

9.多備份

鏈接：http://www.dbfen.com/

多備份提供了主機的文件備份及數據庫的備份。可能對于文件的備份大家都已經有其他方法了，不過數據庫的自動備份現在還沒有多少有效的解決方法，人工備份又顯得比較麻煩。如果數據庫有數據丟失，那就不好找回了。在此推薦一個網站：多備份。提供主機的文件自動備份和數據庫自動備份，方便快捷。

10.慕課網

鏈接：http://www.imooc.com/

學習IT知識哪家強？在此為大家推薦一個全免費的學習網站，資源豐富，還提供了比較創新的學習和練習相結合的方式。感覺非常不錯，講解得也很有條理，推薦一下。

11.W3SCHOOL

鏈接：http://www.w3school.com.cn/

這也是一個非常棒的學習網站，講解簡單易懂，我的PHP入門，HTML，JS，CSS入門都是從這里學到的，感覺講解非常不錯。

12.阿里云

鏈接：http://www.aliyun.com/

感覺比較不錯的主機提供商，提供免費備案，對于ECS的管理做得非常好，數據恢復和備份及監控也應有盡有，另外提供了SLB，RDS，CDN等等的支持，個人感覺很不錯的主機提供商。就是價格略貴！

13.DNSPod

鏈接：https://www.dnspod.cn/

免費的域名解析提供商，管理方便，簡潔高效。非常人性化的提示，還提供域名D監控等功能，方便實用。

14.WordPress

鏈接：http://cn.wordpress.org/

一款開源的PHP框架，搭建個人博客網站最實用的選擇之一。我的個人網站就是基于此搭建，甚至你都不需要懂PHP你就可以搭建自己的個人網站。提供強大的后臺文章管理和插件及主題管理，幾乎可以滿足個人網站所有需求。

P.S.找個好的網站模板，你就相當于成功了一大半。

15.BootStrap

鏈接：http://www.bootcss.com/

一個強大的前端框架，有了它你再也不需要敲那么多行的樣式表，再也不用一點點地調試難看的DIV了。直接調用各種CSS樣式，分分鐘寫出好看的網頁界面。按鈕、表格、進度條、提示框、輸入框、菜單，應有盡有。

16.芒果廣告

鏈接：http://www.adsmogo.com/

如果你開發了自己的移動應用，想添加廣告來賺錢，推薦芒果廣告。它是一個綜合的移動廣告平臺，聚合了百度廣告、多盟廣告、易傳媒等等廣大廣告商，可以自己定制廣告顯示的內容及樣式，可以選擇各種廣告的投放比例。廣告點擊量、展現量詳細報告、收入分析詳細數據應有盡有。推薦一下。

17.極光推送

鏈接：https://www.jpush.cn/

極光推送，使得開發者可以即時地向其應用程序的用戶推送通知或者消息，與用戶保持互動，從而有效地提高留存率，提升用戶體驗

平臺提供整合了Android推送、iOS推送的統一推送服務。讓用戶可以更好地接收你推送的內容。

18.Bmob

鏈接：http://www.bmob.cn/

提供強大的后臺接口支持，移動開發過程中可能需要各種各樣的后臺接口，直接利用這個，你可以創建自己的后臺接口。它還提供了強大的游戲后端支持數據，文檔和教程也是非常的完備，為移動開發帶來相當大的便利。

19.有道云筆記

鏈接：http://note.youdao.com/

大多數人都聽說過吧？在學習或者開發過程中可能會有各種各樣的知識點，好記性不如爛筆頭。最好的方式就是記錄下來。在此推薦一個筆記，有道云筆記。在使用了各種筆記工具之后，發現還是有道好用。它提供了個人云筆記，云協作等功能，做到PC、手機、平板等多處同步。占用小，界面美觀，使用方便。

20.Coding

鏈接：https://coding.net

集合了GitHub和SAE的功能，利用Git上傳代碼，并對代碼進行托管，而且提供了一鍵部署和運行的功能。提供了代碼監控功能，通過自動化靜態代碼分析等管理工具，發現代碼問題，獲取代碼度量信息，及時了解代碼質量狀況。一個新興網站，推薦一下！

21.SendCloud

鏈接：http://sendcloud.sohu.com/

開發過程中你可能會遇到郵件發送的功能，用了SendCloud，一切都方便多了，它提供免費的郵件代發功能。郵件發送的難題，就交給它來解決吧。

22.蒲公英

鏈接：http://www.pgyer.com/

有時候你發布Android市場，發布Appstore，會花費相當多的時間才能得到審核通過。那么在團隊之間，想團隊之間提供內測功能，那么就可以用到它啦，這里提供了一個發布應用的平臺，發布之后，生成鏈接和二維碼，即可實現下載測試，簡單方便。

23.DCloud

鏈接：http://www.dcloud.io/

HTML5現在已經定稿，用HTML5開發APP的浪潮即將襲來，在此提供一個免費的開發網站。它提供了一個HBuilder的工具，以及H5APP開發文檔及H5APP的開發框架MUI框架，有了它，H5APP的開發變得相當簡單，而我也在蠢蠢欲動。

24.青云

鏈接：https://www.qingcloud.com/

提供免費的云服務器、云存儲、云數據庫的功能。同時提供多個開放API，功能實用，非常強大。

25.云測

鏈接：http://www.testin.cn

開發了應用之后到哪里去測試？選擇云測沒錯。它提供應用云測試、手機游戲測試，提供崩潰分析。一切測試由它來搞定。

26.Meteor

鏈接：https://www.meteor.com/

Meteor 是一個構建在 Node.js 之上的平臺，用來開發實時網頁程序。Meteor 位于程序數據庫和用戶界面之間，保持二者之間的數據同步更新。

27、codecademy

鏈接：https://www.codecademy.com/

國外在線學習編程的網站，它為用戶提供了一種學習編程的新方式。它是一種基于網絡的互動編程教程，手把手幫助用戶了解JavaScript的一些基本原理，更重要的是，使用Codecademy學習編程充滿了趣味性。

網頁左方的工具條會指導用戶完成每一項任務。網頁不僅會告知用戶具體怎么做，同時還帶著用戶重新鞏固之前學到過的編程知識，這樣用戶就不會覺得編程很難了。

28、codeschool

鏈接：https://www.codeschool.com/

CodeSchool:在線網站制作教育平臺是一個在線教授編程與Web設計知識的網站，教程包括:視頻教程、編碼挑戰以及屏幕截屏等多種學習方式；無需安裝，告別繁瑣，輕輕松松即可學習。

29、

鏈接https://teamtreehouse.com

TeamTreeHouse:在線網站設計教育平臺是一家類似Codecademy在線教育創業公司，主要提供3類課程的在線學習:Web設計（包括CSS3、響應式設計等）、Web開發（HTML5、Javascript等）以及iOS應用開發。

30、數多多

鏈接：http://www.dataduoduo.com/

數多多依靠八爪魚采集平臺每天成千上萬用戶產生的億級數據支持作為供應鏈，為更多的用戶提供無門檻數據支持。

來源：與時代同行