微信小程序(一):微信小程序申请注册与开发流程
2017-01-05 09:02
1036 查看
附:微信小程序开发文档
AppID 作为开发者的身份标识,在公测阶段暂不支持个人申请,仅支持 企业,政府,媒体,其他组织 四种身份,并需提供相应的证明资料。没有 AppID并不影响开发,只是不能在微信上调试,故而只能在IDE中调试。
每一个 AppID 有管理员和开发者的身份。管理员只有一个,并且不能更改;开发者对于未认证的小程序最多为10个,认证的小程序最多为20个。只能具备其一,才能在其微信上预览。
附:IDE下载地址。下载后直接无脑安装到本地即可。
1.登录
与别的IDE不同,需使用微信号登录。这也是前文提到的需要 管理员和开发者的身份 的凭证。
选择本地小程序项目
添加项目
填写appID,如果没有的话,单击无appID,会提示你部分功能受限,不用在意。填写项目名称和选择项目目录即可。勾选了 在当前目录中创建 quick start 项目 会在你选择的目录下生成一个快速开发的demo程序。点击添加项目完成创建。
2.IDE介绍
作为公测的产品,此次版本的IDE还是比较简陋的。相信当微信小程序正式推出的时候,在IDE的使用上会有很大提升,来满足开发者的开发要求。
第一次打开IDE的界面如下:
可以看见在页面左边的导航区域,有 编辑,调试,项目,编辑,关闭 五个选项。我们可以在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。至于编译和关闭,只是两个功能按钮。(顺带说一句,这个IDE在
Ctrl + S 的时候会自动编译)
编辑时,功能区如下:
1.目录结构
第一次创建项目,工程目录如下:(会生成两个页面并可以运行)
可以看见程序中的文件有四种类型。
.js : 逻辑控制,用于写JavaScript代码。
.wxml : 页面结构,用于写html。当然,微信对其有一定的封装,用的话还需要了解其标签。
.wxss : 样式表文件,用于写css。
.json : 样式配置,符合json语法格式。用来做其作用域内的设置。
做前台的小伙伴看到这心情一定很激动,这不就是前端代码嘛。
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
1.1 以app命名的各个文件是整个app的全局配置文件,其必须放在项目的根目录下。如下:
官方介绍很详细,就不赘述了: app.js , app.json , app.wxss.
1.2 pages 目录下,为工程中的页面,每一个页面对应pages下的一个文件夹。文件夹名和文件名一致,不同文件以后缀区分(注意并不是每个文件都是必须的)。
官方介绍很详细,就不赘述了: .js , .wxml , .wxss, .json.
注意:描述页面的这四个文件必须具有相同的路径与文件名。
2.组件
微信基于HTML封装了一系列的控件,旨在减少大家的开发难度与工作量,请查看 官方文档。
注意:所有组件与属性都是小写,以连字符 - 连接
3.API
请查看 官方文档。
AppID申请
AppID 作为开发者的身份标识,在公测阶段暂不支持个人申请,仅支持 企业,政府,媒体,其他组织 四种身份,并需提供相应的证明资料。没有 AppID并不影响开发,只是不能在微信上调试,故而只能在IDE中调试。每一个 AppID 有管理员和开发者的身份。管理员只有一个,并且不能更改;开发者对于未认证的小程序最多为10个,认证的小程序最多为20个。只能具备其一,才能在其微信上预览。
环境搭建
附:IDE下载地址。下载后直接无脑安装到本地即可。1.登录
与别的IDE不同,需使用微信号登录。这也是前文提到的需要 管理员和开发者的身份 的凭证。
选择本地小程序项目
添加项目
填写appID,如果没有的话,单击无appID,会提示你部分功能受限,不用在意。填写项目名称和选择项目目录即可。勾选了 在当前目录中创建 quick start 项目 会在你选择的目录下生成一个快速开发的demo程序。点击添加项目完成创建。
2.IDE介绍
作为公测的产品,此次版本的IDE还是比较简陋的。相信当微信小程序正式推出的时候,在IDE的使用上会有很大提升,来满足开发者的开发要求。
第一次打开IDE的界面如下:
可以看见在页面左边的导航区域,有 编辑,调试,项目,编辑,关闭 五个选项。我们可以在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。至于编译和关闭,只是两个功能按钮。(顺带说一句,这个IDE在
Ctrl + S 的时候会自动编译)
编辑时,功能区如下:
开发流程
1.目录结构第一次创建项目,工程目录如下:(会生成两个页面并可以运行)
可以看见程序中的文件有四种类型。
.js : 逻辑控制,用于写JavaScript代码。
.wxml : 页面结构,用于写html。当然,微信对其有一定的封装,用的话还需要了解其标签。
.wxss : 样式表文件,用于写css。
.json : 样式配置,符合json语法格式。用来做其作用域内的设置。
做前台的小伙伴看到这心情一定很激动,这不就是前端代码嘛。
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
1.1 以app命名的各个文件是整个app的全局配置文件,其必须放在项目的根目录下。如下:
官方介绍很详细,就不赘述了: app.js , app.json , app.wxss.
1.2 pages 目录下,为工程中的页面,每一个页面对应pages下的一个文件夹。文件夹名和文件名一致,不同文件以后缀区分(注意并不是每个文件都是必须的)。
官方介绍很详细,就不赘述了: .js , .wxml , .wxss, .json.
注意:描述页面的这四个文件必须具有相同的路径与文件名。
2.组件
微信基于HTML封装了一系列的控件,旨在减少大家的开发难度与工作量,请查看 官方文档。
注意:所有组件与属性都是小写,以连字符 - 连接
3.API
请查看 官方文档。
相关文章推荐
- 微信公众号基础01_利用git免费在新浪云搭建测试号服务器
- "好的产品应该是用完即走"——您若认真,您就输了
- Java小程序之球球大作战(基于Java线程实现)
- Android动态破解微信本地数据库(EnMicroMsg.db)
- 微信公众号支付
- 微信小程序一些小坑
- 微信网页授权(OAuth2.0)PHP 源码简单实现
- 微信小程序图集预览器
- 2017最火的o2o电商系统会是【外卖系统】吗?
- iOS微信第三方登录
- 微信小程序-合法域名校验出错
- Java:计算器小程序
- 微信开发之推广支持
- 值得程序猿关注的微信公众号
- 微信开发之现金红包
- 微信开发之刷卡支付
- 微信开发之公众号支付
- 微信小程序内训笔记
- 微信公众号之微信买单
- 微信热补丁解决方案Tinker初探(一)