里整理的内容大致划分四个部分

①常规选型

②静态页面

③接入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/

数多多依靠八爪鱼采集平台每天成千上万用户产生的亿级数据支持作为供应链，为更多的用户提供无门槛数据支持。

来源：与时代同行