uni-app 入门（一）——认识小程序

1. 开发前的准备工作

1. 微信公众平台 注册账号并登录

• 点击 “立即注册”
  
• 注册类型：选择小程序
  
• 填写注册信息、验证邮箱等
  
• 注册完成后进行登录
  

2. 下载并安装 【微信开发者工具】

• 微信公众平台 ==》 开发 ==》 开发工具
  
• 下载稳定版并安装
• 安装好的开发者工具，然后扫码进行登录
  

3. 开发者工具介绍

• 登录后的微信开发者工具
  
• 新建项目
  
• APPID 获取
  • 打开微信公众平台
    

4. 小程序项目结构
   

2. 小程序项目的基本组成结构

问题引入

• 小程序页面由什么组成
• project.config.json 文件的作用是什么
• sitemap.json 文件的作用是什么

2.1 小程序页面的组成

• pages：所有的 小程序页面， 每个页面以 单独的文件夹存在

  • index：index 页面文件夹，文件夹下面都包含 4 个 基本的页面文件，这四个文件共同组成 index 页面

    • index.js：.js 文件 – 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等
    • index.json：.json 文件 – 当前页面的配置文件，配置页面的外观、表现等
    • index.wxml：.wxml 文件 – 页面的模板结构文件
    • index.wxss：.wxss 文件 – 当前页面的样式表文件

• utils：工具类文件夹

  • utils.js

• app.js：小程序的项目逻辑文件，用来 注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

• app.json：小程序公共配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

• app.wxss：小程序公共样式表

• project.config.json：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

  • setting 中保存了编译相关的配置
  • projectname 中保存的是项目名称
  • appid 中保存的是小程序的账号 ID

• sitemap.json：配置小程序及其页面是否允许被微信索引

  • rules中保存了索引规则列表的配置
  • rules规则中，action表示页面是否能被索引(allow,disallow)，page表示生效的页面

2.2 .wxml 文件

问题引入：

• 是否可以在 wxml 文件中写入 div 标签，为什么？

1. 什么是 wxml

   • wxml （WeiXin Market Language）是框架设计的一套标签语言（组件），用于构建小程序页面的结构，类似于HTML

2. WXML 和 HTML 的区别

   • 标签名称不同

     • HTML(div, span, img, a)
     • WXML(view, text, image, navigator)

   • 属性节点不同

     • 超链接
     • 跳转到home页

   • 提供了动态渲染数据的模板语法

     • 数据绑定
     • 条件渲染
     • 列表渲染

3. wxml 中是否可以写入 div标签

   • 可以使用，但不推荐
   • 在wxml中所有不被识别的标签都会被解析为 类view 标签的

2.3 .wxss 文件

问题引入：

• wxss 新增了哪些尺寸单位
• wxss 推荐的选择器

1. 什么是 wxss
   • wxss（WeiXin Style Sheets）是一套类似于 css 的样式语言
   • wxss 具有 css 的大部分特性
2. wxss 新增了一个尺寸单位 rpx ,一个 rpx 为页面宽度的 1/750
3. 分类
   • 全局样式：根目录下 wxss 中的样式
   • 局部样式： 页面目录下 wxss 中的样式
   • 局部样式优先级高于优先级，当二者发生冲突时，局部样式会覆盖全局样式
4. 选择器
   • wxss 仅支持部分css选择器：类（class）选择器和id选择器、元素选择器、并集选择器、后代选择器、伪类和伪元素
   • 一般推荐使用 class 选择器

2.4 .json 文件

问题引入：

• 小程序中的json文件分为哪两种
• 当这两种文件出现相同配置时，会出现什么结果

1. 根目录下 app.json 文件

   • 修改项目基本配置的文件

2. 页面中的 .json 文件

   • 修改当前页面的配置

页面中 json 文件的优先级高于根目录下 json 优先级

3. 小程序宿主环境

问题引入：

• 什么是宿主环境
• 微信小程序项目为什么可以调用微信支付功能
• 小程序的运行环境是如何划分的

1. 宿主环境：程序运行所必须依赖的环境

   • web 前端的宿主环境为：浏览器
   • android 软件的宿主环境为：android 系统
   • IOS 软件的宿主环境为：IOS 系统
   • 小程序 的宿主环境： 手机微信

2. 小程序的宿主环境是 手机微信

   • 所以小程序可以调用手机微信的：
     • 扫码
     • 支付
     • 登录
     • 分享
     • 等功能

3. 小程序的运行环境

• 渲染层

  • wxml、wxss运行的地方
  • 渲染层的界面使用了WebView 进行渲染
  • 多个界面就会有多个 webview

• 逻辑层

  • js运行在逻辑层
  • 逻辑层采用JsCore线程运行JS脚本

• 渲染层和逻辑层之间的通信，会经过微信客户端的中转

  • 逻辑层发送网络请求也经由 Native（手机原生系统） 转发

4. 小程序内置组件

小程序组件官方文档

• 常用到的组件
  • view：视图容器，类似于div标签
  • scroll-view：可以滚动的视图区域，相当于添加了 overflow:scroll 的div
  • swiper：滑块视图容器，需要搭配 swiper-item 使用
  • text：文本，相当于 span 标签
  • rich-text：富文本
  • button：按钮
  • image：图片，相当于 img

5. 小程序成员管理

1. 在 小程序开放平台 中，可以对小程序进行成员的管理
   

2. 成员角色

   • 管理员：账号注册绑定的微信，小程序项目负责人
   • 项目成员：小程序开发成员
   • 体验人员：测试人员

6. 小程序发布流程

1. 版本分类
   1. 本地 - 开发版本
   2. 上传 - 开发版本 / 体验版本
   3. 上传 - 审核版本
   4. 上传 - 线上版本
2. 微信开发者工具

• 右上角 “上传” 按钮进行上传
  
• 填写版本号和项目备注
  
• 上传成功
  

3. 在小程序公众平台 进行版本管理

• 刚刚上传的版本在开发版本可以找到
  
• 将上传的版本设置为 体验版
  

• 体验版本没有问题，可以“提交审核”，得到审核版本
  • 提交审核之前要确保 小程序信息 是完整的
• 审核成功后就会自动上传成为线上版本