我简单总结了一下自己制作小程序的过程，也分享了一些实用的小技巧给大家，对新手应该有用。

文章中提到的登录微信公众号后的功能都是下面其中之一：

本文提到的所有示例均在智能对话小程序中使用，详细代码分析请见个人小程序实现自然语言对话工程查询完整代码分析

1、注册一个微信小程序公众号，包括账号注册和管理员信息注册，管理员信息注册非常重要，因为管理员有发布小程序、设置开发版体验用户等权限。

请注意，注册公众号的时候，选择的是小程序，而不是一般认为的公众号。

注册地址：

请使用未在公众平台、开放平台、企业账号注册过、未绑定过个人账号的邮箱填写邮箱和密码。

填写主题信息

邮箱激活后，需要完善主体信息和管理员信息。

一般如果没有企业注册信息，就选择个人注册账户类型。

请注意，填写个人账号管理员信息时，需要使用绑定银行卡且与注册主体相同的微信账号扫描二维码，如下图所示：

填写小程序基本信息

在微信小程序公众平台首页，你会看到填写的基本信息，如下图：

填写基本信息时的服务类别很重要，表示你的小程序支持哪些服务。填完基本信息后，小程序注册就完成了。

2 开发工具及准备

如果你要开发需要发布的小程序，请在公众号中找到设置->开发设置，找到

开发工具安装

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

添加项目

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

填写你的公众号码。

填写任意项目名称。

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

代码编译

编译选项使用默认设置即可，每次保存后都会自动编译，当你的控件正常显示时就表示编译完成了，当然你也可以查看。

当编译完成但你的控件没有完全显示出来时，可能是你的电脑太慢了。关闭该项目并重新打开它。

调试

--------调试过程中请勿修改代码，只能在编辑页面进行修改，保存后需重新调试。

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

--------如果控件的布局总是没有调整好，最好直接在调试界面的Wxml里调试，这样能清楚的看到调用了哪些，各个的哪些属性是生效的。

预览

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

在开发工具里找到“项目”栏目->预览，然后微信扫一扫，半个小时就可以使用了。

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

代码上传

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

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

经验

上传代码后，可以邀请其他会员来体验，但必须先将其他会员设置为体验者。

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

每个账号可绑定10名测试员。

体验者同意体验后，可在微信发现->小程序中找到体验版。

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

以下是一些关键阅读材料：

（请翻到页面底部）

微信小程序平台常见被拒情况

4 框架介绍及技巧分享 在学习小程序框架之前，需要学习一些JS、CSS的知识。

关于小程序框架的详细介绍可以参考：小程序教程，这里就不多说了，大家一定要仔细阅读官方文档。

本文只介绍一些技巧。

网络访问注意事项

---------小程序不能直接连接外部的URL，也就是外部的页面

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

访问服务端的API接口说明：

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

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

域名每月仅可设置五次，请谨慎修改。

修改域名后一定要在开发工具的项目->配置信息中刷新，以使域名生效。

如果你只是想测试一下这个URL有没有用，而不确定最终是否要使用这个服务器，那么可以在开发阶段去掉域名检测，开发工具->项目：

布局参考

当使用.wxss描述某个控件的布局和样式时，可以将同一个控件布局写在一个公共的wxss文件中，其他wxss引用这个公共文件即可，例如：

@"../..//.wxss";

主页设置

主页不需要任何特殊设置。在app.json的属性中，主页是第一个。

"":[ "//", "///", "//dict/dict", "///", "///", "//mine/mine" ] 分类管理

尽量把每个页面放在一个子文件夹中，这样代码看起来比较清晰。下图中，下面有五个子页面。

列表渲染

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

您可以参考博客：

图像格式

1 微信小程序使用的图片尺寸尽量小，采用.png格式。

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

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

背景图片设置

背景图片是VIEW的背景图片，比如滚动的图片，目前只支持URL格式的图片。

详情请参阅博客：

当然，您可以在开发工具中调试时使用本地图片作为背景图片，但是在手机预览时将无法看到这些图片。

提供图片存储的服务器有很多，你可以找个地方存储，然后获取网址，比如CSDN、七牛等。

布局控件适配

自适应就是说你的布局可以在任何手机上显示，并且布局可以根据手机屏幕的大小而缩小或者放大。

把所有跟尺寸有关的单位都改成rpx就行了，有时候你下载的demo可能有其他尺寸单位，比如px，rem。

换算公式：

1像素=2像素

1rem 大约等于

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

它们的格式在app.json中设置，例如：

"":{ "":"#", "":"", "":"#", "xt":"智能生活宝", "le":"#" },详细说明见：

除格式中定义的属性外，其他格式都不能修改。

例如标题栏是否有返回按钮，关闭按钮等等。

----------导航栏可以设置多个导航，但只能指定页面、图标、字体等，不用考虑位置，至少配置2个，最多配置5个。

例如，以下配置有两个导航栏：页面和帮助：

"":{ "": "#", "":"#", "":"#", "": "", "list": [{"":"//","":"//.png","":"//home.png","text": "首页"},{"":"//mine/mine","":"//.png","":"//mine.png","text": "帮助"} ] },效果图如下：

图片导航至页面

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

wx.({

网址：“..///?code=menu”

}）

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

详细介绍见：

如何处理具有类似功能的多个页面

当多个页面布局和处理方式相同，但是需要处理的数据不同时，可以只写一个公共页面，在页面中引入其他控件时，通过传入不同的参数来区分。

wx.({

网址：“..///?code=menu”

}）

比如上面导航的时候，传入的参数code表示菜单类型。

详情请参考博客：

所提供代码中的页面是公共页面。

图片、文字等多个空间同时触发事件

如果希望在触摸同一个View内的图片，文字或其他控件时触发同样的事件，请将此事件直接放在视图配置中。

文本/焦点控制

当文本/控件仅用于显示数据时，请关闭自动焦点，否则在页面上单击控件时键盘会自动弹出。

属性自动 - 未设置或值为 。

文字滚动

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

参考博客：

表单创建

参考博客：

清除控件的输入文本

请参考博客：

5、刚开始下载使用模板的时候，可以先上网找一些免费的demo来学习，这样会起到事半功倍的效果。

6 发布 当你确定你的小程序没有问题的时候，至少功能是齐全的，没有严重的bug。

您可以开始发布。

上传代码

发布前必须上传代码，上传方法请参考第2部分。

提交审核

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

图中开发版就是你上次上传的版本，点了“ for ”之后，就会在版本里看到，个人一般需要1到3天，反正我最长也是3天，中间还夹杂着周末，最短也才两个小时不到。

提交点评后，若尚未进入点评系统，您可以撤回点评。

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

审核通过后，需要登录微信公众号，手动点击发布，才会在网络版中展示，用户才可以使用。

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

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

二维码