一、微信小程序开发详解

目录

1、什么是小程序?

2、小程序可以干什么?

3、相关资料

                                        第一个小程序

一、申请帐号

二、测试号申请

三、安装开发工具

四、你的第一个小程序

五、编译预览

六、目录结构

七、JSON 配置

八、小程序配置 app.json

九、工具配置 project.config.json

十、页面配置 page.json

十一、JSON 语法

十二、WXML

更详细的文档可以参考 WXML

十三、WXSS 样式

更详细的文档可以参考 WXSS 。

十四、JS 逻辑交互

响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。

十五、util公共函数定义及读取

                                        小程序配置

一、全局配置

完整配置项说明请参考小程序全局配置

完整配置项说明请参考小程序全局配置

二、页面配置

完整配置项说明请参考小程序页面配置

配置小程序 /sitemap 配置

三、sitemap 配置


1、什么是小程序?

  1. 2017年度百度百科十大热词之一

  2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )

  3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

  4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

2、小程序可以干什么?

  1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用

  2. 通过扫一扫或者在微信搜索即可下载

  3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选

  4. 连接线上线下

  5. 开发门槛低, 成本低

3、相关资料

官网:微信公众平台

                                        第一个小程序

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

跟随这个教程,开始你的小程序之旅吧!

一、申请帐号

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

登录 小程序后台 ,我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

有了小程序帐号之后,我们需要一个工具来开发小程序。

二、测试号申请

请大家先完成测试号的申请任务。

三、安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

四、你的第一个小程序

新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

接下来我们来预览一下这个小程序的效果。

五、编译预览

点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。(下图不是原始图,下图是我已经写好的,原始图忘记截了)

 通过这个章节,你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。

六、目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必需 作用
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表

一个小程序页面由四个文件组成,分别是:

文件类型 必需 作用
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

第一个小程序项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件

  2. .wxml 后缀的 WXML 模板文件

  3. .wxss 后缀的 WXSS 样式文件

  4. .js 后缀的 <

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天蝎座的程序媛

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值