专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员

获取验证码

立即登录

HiShop > Hi小程序 > 小程序开发 > 官方文档 >

微信小程序怎么开发

2018-05-22 作者：秩名

微信小程序开发教程为大家介绍小程序开发流程的步骤详解，让大家全方位了解小程序开发的流程步骤。

1 注册

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

请注意，公共号注册时选择小程序，不是通常认为的公众号。

注册地址：

https://mp.weixin.qq.com/

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

填写主体信息

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

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

注意，个人账号填写管理员信息时，需要使用绑定了银行卡且与注册主体一致的微信扫描二维码。

填写小程序基本信息

在小程序的公众平台的首页，会看到基本信息的填写

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

2 开发工具及准备工作

获取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下面有五个子页面。

线上+线下+进销存+收银+会员门店零售管理好帮手

极速收银管理
门店能实现快速收银，提升门店经营效率。
进销存管理
系统自带进销存管理，更好管理库存销售。
软硬件一体化
配备收银硬件一站式整体服务。

收银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

【本站声明】

1、本网站发布的该篇文章，目的在于分享电商知识及传递、交流相关电商信息，以便您学习或了解电商知识，请您不要用于其他用途；
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。