1 小程序与普通网页开发的区别
(1) 运行环境的不同
网页运行在浏览器汇总,小程序运行在微信环境中
(2) api不同
(3) 开发模式不同
2 小程序代码的构成-项目结构
(1) 目录结构
(2) 页面的组成部分
组件: 一个完整的前端功能的整体,页面(html),功能(script),样式(style)
(3) json配置文件
① app.json
- page: 用来记录当前小程序所有页面的路径
- windows: 全局定义小程序所有页面的背景色,文字颜色等
- style: 全局定义小程序组件所使用的的样式版本(v2表示新版样式)
- tabBar: 小程序的tabBar效果的配置
- sitemapLocation: 用来指明sitemap.json的位置
② project.config.json(用来记录小程序开发工具所做的个性化配置)
-
setting: 保存了编译相关的配置(在设置中进行的设置会体现在setting中)
-
projectname : 保存的是项目名称
-
appid: 保存的是小程序的账号 ID
-
checkSiteMap: 控制台sitemap警告
③ sitemap.json
④ 页面.json
小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项,不需要写window对象名,直接写
3 新增小程序页面
在app.json -> pages 中新增页面存放路径,小程序开发者工具可帮助我们自动创建对应的页面文件: 'pages/list/list',pages配置项的第一项作为首页显示
4 小程序代码的构成
4.1 WXML模板
(1) WXML和HTML的区别
标签名称不同
- HTML(div, span, img, a)
- WXML(view, text, image, navigator)
属性节点不同
- <a href="#"></a>
- <navigator url="/pages/home/home"></navigator>
提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
4.2 WXSS
新增了rpx尺寸单位
- CSS中需要手动进行像素单位换算,例如rem
- WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部的样式
- 项目根目录中的app.wxss会作用于所有小程序页面
- 局部页面的wxss会作用域局部
WXSS仅支持部分CSS选择器
- .class和#id
- element
- 并集选择器,后代选择器
- ::after和::before等伪类选择器
4.3 小程序中的js逻辑交互
4.3.1 小程序中js文件的三大类
app.js
- 是整个小程序项目的入口文件.,通过调用App()函数来启动整个小程序
页面的.js文件
- 是页面的入口文件,通过调用 Page() 函数来创建并运行页面
普通的.js文件
- 是普通的功能模块文件,用来封装公共的函数或属性供页面使用
5 小程序的宿主环境
宿主环境指的是程序运行所必须的依赖环境,例如安卓和ios系统是两个不同的宿主环境
手机微信是小程序的宿主环境
借助此宿主环境提供的能力,可以完成许多普通网页无法完成的功能
5.1 小程序宿主环境包含的内容
5.1.1 通信模型
(1) 通信的主体
小程序通信的主体是渲染层和逻辑层,其中:
- WXML模板和WXSS样式工作再渲染层
- JS脚本工作在逻辑层
(2) 而所谓的通信模型指的是:
- 渲染层和逻辑层之间的通信
- 逻辑层和第三方服务器之间的通信
5.1.2 运行机制
小程序的启动过程:
- 把小程序的代码包下载到本地
- 解析app.json全局配置文件
- 执行app.js小程序入口文件,调用App()创建小程序的实例(一个小程序中,只有一个App对象,可能会有多个实例Page对象,一个页面中会有多个Component实例对象)
- 渲染小程序首页
- 小程序启动完成
5.1.3 组件(哪些标签可以使用)
(1) 组件的分类
- 普通视图区域
- 类似于 HTML 中的 div,是一个块级元素
- 常用来实现页面的布局效果
- 可滚动的视图区域
- 常用来实现滚动列表效果
- 轮播图容器组件 和 轮播图 item 组件
- 常用的属性
- indicator-dots 是否显示面板指示点
- indicator-color 指示点颜色
- indicator-active-color 激活指示点颜色
- autoplay 是否自动切换
- interval 自动切换时间间隔
- circular 是否采用衔接滑动
text和rich-text组件
- selectable可以长按选中
- 通过rich-text组件的nodes属性节点,把HTML 字符串渲染为 WXML 结构,类似v-html
(3) 其他常用组件
button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能
- type属性指定按钮类型,size按钮的尺寸,plain镂空的按钮
image 组件的基本使用
- src指定图片的路径,/表示根目录
- mode属性来指定图片的裁剪和缩放模式,常用的mode属性值如下:
5.1.4 API
(1) 概述
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力
(2) 3大分类
事件监听API
- 特点:以 on 开头,用来监听某些事件的触发
- 举例: wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步API
- 特点1:以 Sync 结尾的 API 都是同步 API
- 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例: wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步API
- 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调
- 用的结果
- 举例: wx.request() 发起网络数据请求,通过 success 回调函数接收数据
顶级对象: wx
6 协同工作和发布
6.1 协同工作
(1) 项目成员的组织结构
(2) 开发流程
6.2 小程序成员管理
(1) 成员管理的两个方面
项目成员: 表示参与小程序开发, 运营的成员, 可以登录小程序的管理后台
体验成员: 表示参与小程序内测体验成员,可使用体验版小程序,但不属于项目成员
(2) 不同项目成员对应的权限
(3) 开发者的权限说明
(4) 添加项目成员和体验成员
左侧菜单的管理 -> 成员管理
6.3 小程序的版本
(1) 软件开发过程中的不同的版本
- 开发者编写代码的同时,对项目代码进行自测(开发版本)
- 直到程序达到一个稳定可体验的状态时,开发者把体验版本给到产品经理和测试人员进行体验测试
(2) 小程序的版本
6.4 发布上线
(1) 步骤
上传代码 -> 提交审核 -> 发布
(2) 上传代码
① 点击开发者工具顶部工具栏中的“上传” 按钮
② 填写版本号以及项目备注
(3) 提交审核
① 为什么需要提交审核:为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过腾 讯官方审核的。
② 提交审核的方式:在开发版本的列表中,点击“提交审核”按钮之后,按照页面提示填写相关的信息,就能把小程序提交到腾讯官方进行审核。
(4) 基于小程序码进行推广
相对于普通二维码来说,小程序码的优势如下:
① 在样式上更具辨识度和视觉冲击力
② 能够更加清晰地树立小程序的品牌形象
③ 可以帮助开发者更好地推广小程序
获取小程序码的 5 个步骤:
登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载
(5) 查看小程序的运营数据
在"小程序后台"查看
在"小程序数据助手"查看(下载小程序"小程序数据助手查看")
7 WXML模板语法
7.1 数据绑定
(1) 数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用
(2) 在data中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可
(3) 在WXML中使用,Mustache语法
<>{ { 变量名 }}</>(标签属性中仍一样)
7.2 事件绑定
(1) 常用事件
(2) 如何定义事件处