• 获取AppID

如果你要开发一个需要发布的小程序，在你的公众号里找到设置->开发设置，找到AppID

• 开发工具安装

下载：登录小程序公众号之后，找到首页，有开发工具下载，帮助文档等。

• 添加项目

下载安装好开发工具，开始添加项目。

在AppID处填上你公众号的AppID.

项目名称随便填。

项目目录可以直接指向Demo地址，也可以指向一个空的文件夹（可以选择quick start项目）。

• 代码编译

编译选项使用默认设置即可，每次保存之后会自动编译。当你的控件正常显示之后，表示编译结束。当然，也可以查看Console.

当Console显示编译完毕，但你的控件没有完全显示时，应该是你电脑速度太慢，关掉工程，重新打开即可。

• 调试

-------- 调试期间不要修改代码。只能在编辑页面修改，保存之后，需要重新调试。

-------- 调试支持断点调试，Console可以直接写代码辅助调试，类似浏览器console的功能。

-------- 如果控件的布局总是调不好，最好直接在调试界面的Wxml里调试，可以清晰的看到调用了哪些class,每种class的哪些属性在起作用。

• 预览

管理员有预览项目的功能，即在手机上看小程序的效果。

开发工具中找到“项目”一栏->预览，然后拿微信扫描即可。可使用半小时。

微信上可以在"发现"->"小程序"中找到你的小程序开发版本。

• 代码上传

代码上传之后可以邀请其他微信用户体验，或者提交审核。

在开发工具中选择选项->基础信息->上传

• 体验

代码上传之后，可以邀请其他成员体验，但必须先把他们设置为体验者。

设置方式：公众号登录—>用户身份->体验者->绑定

每个账号可以绑定10个体验者。

体验者同意体验后可在其微信的发现->小程序里找到体验版本。

3    功能确认

功能确认就是确认你的小程序到底要完成什么功能，为什么要单独写这个呢？如果你的小程序功能不符合要求，那审核是过不了的。

下面几项要重点阅读：

个人小程序允许开发的项目类别（请翻到页面下部）

微信小程序平台常见拒绝情形

审核规范

4   框架介绍和小技巧分享

在学习小程序的框架前，需要学习一些JS,CSS 的知识。

小程序框架详细介绍请参考：小程序教程  。这里不再赘述。请务必仔细阅读官方文档。

本文仅描述一些小技巧。

• 网络访问注意事项

---------小程序无法直连外部URL,就是外部页面

---------访问服务器，比如API接口

访问服务器的API接口描述：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

注意：request 仅支持https的访问方式。另外，你访问的域名必须在公众号账号设置，否则调试代码会报错。

request域名的设置方式： 公众号->设置->开发设置 ，见下图

域名每个月只能设置五次，谨慎修改。

修改域名之后务必到开发工具的项目->配置信息中进行刷新，这样域名才能生效。

如果只是希望测试URL是否好用，不确定最终是否使用这个服务器，可以在开发阶段去掉域名检测，开发工具->项目：

• 布局引用

在使用.wxss描述控件的布局和样式时，同样的控件布局可以写在一个公用的wxss文件里，其他wxss可以再引用这个公用文件，比如：

@import "../../common/common.wxss";

• 主页设置

主页不需要特殊设置，在app.json的pages属性里，排在第一个的就是主页。下图中的主页就是index

"pages":["pages/index/index","pages/components/identify/identify","pages/components/dict/dict","pages/components/express/express","pages/components/general/general","pages/components/mine/mine"]

• Pages分类管理

尽量每一个页面放在一个子文件夹里，代码看起来清晰。在下图中，components下面有五个子页面。

• 列表渲染

当同一个View中需要放多个格式相同的控件时，尽量使用列表渲染的方式，代码容易维护，样式也美观。

可以参考博客：

http://blog.csdn.net/huangmeimao/article/details/76038974

• 图片格式

1 微信小程序中使用的图片size尽量要小，格式为.png.

可以在网上找在线格式转换工具或者图片缩小工具修改图片。

图片过大会影响代码审核和小程序工作效率，尤其是加载。

• 背景图设置

背景图即某个VIEW的背景图片，比如滚动图，目前仅支持url方式的图片。

详见博客：http://blog.csdn.net/huangmeimao/article/details/75513508

当然，你在开发工具中调试时，本地图片做背景图也是可以的，但是手机上预览会看不到图片。

提供图片存储的服务器有很多，自己找个地方存好，获取URL就可以了。比如CSDN，七牛。

• 布局控件自适应

自适应就是你的布局不管在什么手机上都能显示，布局随手机屏幕大小进行缩小和放大。

只要把所有的尺寸相关单位修改为rpx即可，有时候你下载的Demo可能有其他尺寸单位，比如px,rem.

转换公式：

1px=2rpx

1rem约等于35rpx

• 标题栏、导航栏、状态栏、窗口

它们的格式在app.json的windows里设置，比如：

"window":{"backgroundColor":"#f4f4f4","backgroundTextStyle":"light","navigationBarBackgroundColor":"#FF5722","navigationBarTitleText": "智能生活宝","navigationBarTextStyle":"#FFFFFF"},

详细说明见：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

除了windows里定义的属性，其他的格式是不可以修改的。

比如，标题栏中有无回退键，关闭键等。

----------导航栏可以通过tabBar设置多个导航，但仅可以指定页面、图标，字体等。位置什么的就不要考虑了。最少配置2个，最多配置五个。

比如下面配置了页面和帮助两个导航栏：

"tabBar":{"color": "#959394","selectedColor":"#959394","backgroundColor":"#f0f0f0","borderStyle": "white","list": [{"pagePath":"pages/index/index","iconPath":"pages/images/home_b.png","selectedIconPath":"pages/images/home.png","text": "首页"},{"pagePath":"pages/components/mine/mine","iconPath":"pages/images/mine_b.png","selectedIconPath":"pages/images/mine.png","text": "帮助"}]},

效果图如下：

• 图片导航到页面

可以给图片或者图片所在的View设置事件，比如bindtap,然后在事件处理函数里调用设置导航的API函数：

wx.navigateTo({

url:"../components/general/general?code=menu"

})

“?”后面是提供给页面的参数名称和值。

详细介绍见：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html

• 多个页面功能相似时的处理

当多个页面的布局相同，处理方式也相同，只是要处理的数据不同时，就可以仅写一个公共页面，其他控件导入页面时，通过传入不同的参数进行区分。

wx.navigateTo({

url:"../components/general/general?code=menu"

})

比如，上面在导航时，传入的参数code指明是menu 类型。

详细可参考博客：http://blog.csdn.net/huangmeimao/article/details/76418753

里面提供的代码中general页面就是一个公共页面。

• 图片和文字等多个空间同时触发一个事件

如果你希望再同一个View中的图片和文字或者其他控件触摸时都触发同一个事件，直接把这个事件放在view的配置里。

• Text/textarea 焦点控制

Text/textarea控件仅用来显示数据时，要关掉自动聚焦，否则你所在页面时，点击控件就会自动弹出键盘。

属性auto-focus不设置或者值为 false即可。

• 文本滚动

若需要显示的文本内容大于文本框，能够自动出现滚动条，而不是放大文本框。

参考博客：

http://blog.csdn.net/huangmeimao/article/details/76408327

• 表格制作

参考博客：http://blog.csdn.net/huangmeimao/article/details/76038974

• Input控件输入文字清空

请参考博客：http://blog.csdn.net/huangmeimao/article/details/74936966

5   模板下载和使用

刚开始可以去网上找一些免费的Demo学习一下，事半功倍。

6   发布

当你确定你的小程序没有什么问题了，至少功能完善，没有严重bug.

可以开始发布。

• 上传代码

发布之前必须先上传代码，上传方式请参考第2节。

• 提交审核

登录微信公众平台->开发管理

图中开发版本即你最后一次上传的版本，点击“提交审核”之后，就会在审核版本中看到。一般个人审核需要1到3天吧，反正我的最长是3天，且中间有周末。最短的不到两小时。

提交审核后，若还没有进入审核系统，可以撤回审核。

审核通过后你会在管理员微信收到审核通过通知，当然微信公众号也可以查询。

审核通过后，需要你登录微信公众号手动点击发布，才会再线上版本中显示，这时用户就可以使用了。

7   推广

• 登录微信公众号->推广->修改关键词

每个人可以写10个关键词，以便用户在搜索公众号时可以搜到你的小程序

• 二维码

分享你的二维码图给用户

登录微信公众号->设置,下载二维码

• 通过公众号关联

如果你有其他公众号，也可以在其他公众号里关联你的小程序。

8   数据查看

登录微信公众号->数据分析，可以看到小程序各页面的访问情况和人数，转载等信息。