微信小程序
一、概述
1、移动端开发的形式
C/S clinet/server 客户端和服务端 提前下载客户端 比如:淘宝移动端App、王者荣耀
B/S Brwoser/server 浏览器和服务端 通过浏览器输入网址打开使用 比如:移动端网页、页游
原生开发 NativeApp IOS[object-c和swift]和Andriod[java、kotlin] 使用体验最好 功能全 开发周期较长 需要学习新的开发语言和技术栈
web开发 WebApp 网页 通过浏览器打开 HTML+CSS+Javascript 使用体验差 开发周期短 快速开发 基于HTML5调用实现一些定位等手机功能
混合开发 HybirdApp 基于web技术栈,通过PhoneBridge桥接的方式 可以调用手机功能,并且拥有web快速开发的便捷性 Dcloud公司 uniapp
基于vuejs ReactNative APICloud Ionic
2、微信小程序
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。
https://developers.weixin.qq.com/miniprogram/dev/framework/
3、开发工具
微信小程序开发,需要安装微信开发者工具
使用特定语法
进行开发
二、微信小程序
1、开发者工具安装
安装过程没有什么其他特殊选择,注意安装的盘符大小合适就可以。
安装开发者工具,
2、生成项目包
3、项目包目录结构
在微信小程序开发过程中,需要使用到wxml
定义结构和内容,wxss
定义修饰样式,js
javascript实现业务逻辑
.json
后缀的JSON
配置文件.wxml
后缀的WXML
模板文件.wxss
后缀的WXSS
样式文件.js
后缀的JS
脚本逻辑文件
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
app.js | 是 | 小程序逻辑-小程序入口文件 |
app.json | 是 | 小程序公共配置文件 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序page页面由四个文件组成,分别是:
文件类型 | 必填 | 作用 |
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
4、配置文件
参考网址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json文件用来对微信小程序进行全局配置的,设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。
app.json由于是json文件
,所以其中不能添加任何注释,key和value字符串必须用双引号引起来,数组或对象最后一定不能有逗号。
常用的全局配置:
- debug:debug调试是否开启
- pages:注册小程序的页面路径列表
数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
- window:全局的默认窗口表现
用于设置小程序的状态栏、导航条、标题、窗口背景色
- tabBar:小程序底部或顶部菜单定义(换句话说,小程序的菜单是通过json配置来实现的)
- networkTimeout:小程序网络请求超时时间设置
- usingComponents:自定义组件配置
全局配置文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html