微信小程序开发

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

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO 。 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) 组件的分类

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问

(2) 常用的视图容器类组件

view

• 普通视图区域
• 类似于 HTML 中的 div，是一个块级元素
• 常用来实现页面的布局效果

scroll - view

• 可滚动的视图区域
• 常用来实现滚动列表效果

swiper 和 swiper - item

• 轮播图容器组件 和 轮播图 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) 如何定义事件处