uni-app_01

1、小程序简介

黑马视频

【黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】 https://www.bilibili.com/video/BV1834y1676P/?p=3&share_source=copy_web&vd_source=271b4386fd06dbbfd6504cf65bb85f31

小程序与普通网页开发的区别

1. 运行环境不同
   网页运行在浏览器环境中
   小程序运行在微信环境中
2. API不同
   由于运行环境的不同，所以小程序中，无法调用DOM和BOM的API
   但是，小程序中可以调用微信环境中提供的各种API，例如：
   • 地理定位
   • 扫码
   • 支付
3. 开发模式不同
   网页的开发模式：浏览器+代码编辑器
   小程序有自己的一套标准开发模式：
   • 申请小程序开发账号
   • 安装小程序开发工具
   • 创建和配置小程序项目

体验小程序

小程序官方组件展示

2、第一个小程序

注册小程序开发账号

https://mp.weixin.qq.com/

略

设置外观和配置代理模式

创建小程序项目

创建一个小程序项目

不使用云服务

模版使用JavaScript

启动后是这样的

主界面的主要组成

3、小程序代码的构成

了解项目的基本组成结构

1. pages用来存放所有小程序的页面
2. utils用来存放工具性质的木块（例如：格式化时间的定义模块）
3. app.js小程序的入口项目
4. app.json小程序项目的全局配置文件
5. app.wxss小程序项目的全局样式文件
6. project.config.json项目的配置文件
7. sitemap.json用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

所有小程序的页面都放在pages目录中，以单独的文件夹存在，如图：

其中每个页面由4个基本文件组成，分别是：

• .js文件（页面的脚本文件，存放页面的数据、事件处理函数等）
• .json文件（当前文件的配置文件，配置窗口的外观、表现等）
• .wxml文件（页面模版结构文件）
• .wxml文件（当前页面的样式表文件）

JSON配置文件的作用

小程序项目中有4种json配置文件，分别是：

1. 项目根目录中的app.json配置文件
2. 项目根目录中的project.config.json配置文件
3. 项目根目录中的sitemap.json配置文件
4. 每个页面文件夹种的.json配置文件

app.json文件

app.json文件是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等。

• Demo项目里边的app.json配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1. “pages”：用来记录当前小程序所有页面的路径
2. “window”：全局定义小程序所有页面的背景色、文字颜色等
3. “style”：全局定义小程序组件所使用的样式版本
4. “sitemapLocation”：用来指明sitemap.json的位置

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

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

• sitemap.json文件，微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。

  当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}
1
2
3
4
5
6
7

“allow”：表示被索引

“disallow”：表示不被索引

• 页面的.json配置文件

  小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。例如:

  

• 新建小程序页面

  只需要在app.json -> pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，

  

• 修改项目首页

  只需要调整app.json -> pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染，如图所示:

  

WXML模板

1. 什么是WXML
   WXML (WeiXin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。
2. WXML和HTML的区别
   • 标签名称不同
     • HTML (div, span, img, a)
     • WXML(view, text, image, navigator)
   • 属性节点不同
     • 超链接
   • 提供了类似于Vue中的模版文件
     • 数据绑定
     • 列表渲染
     • 条件渲染
3. 什么是WXSS
   • WXSS (Weixin style Sheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。
4. WXSS和CSS的区别
   • 新增了rpx尺寸单位
     • CSS中需要手动进行像素单位换算，例如rem
     • WXSS在底层支持新的底层单位rpx，在不同大小的屏幕上小程序会自动进行换算
   • 提供了全局的样式和局部样式
     • 项目根目录中的app.WXSS会作用于所有小程序页面
     • 局部页面的.WXSS样式仅对当前页面生效
   • WXSS仅支持部分CSS选择器
     • 使用比较常用的选择器
     • .class和#id
     • element
     • 并集选择器、后代选择器
     • ::after和::before等伪选择器
5. JS逻辑交互
   • 小程序中的.js文件
     • 一个项目仅仅提供展示页面是不够的，在小程序中，通过.js文件来处理用户的操作。例如：响应用户的点击、获取用户的地理位置等
   • 小程序中的JS文件分为三大类
     • app.js
       • 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
     • 页面的.js文件
       • 是页面的入口文件，通过调用Pages()函数来创建并运行页面
     • 普通的.js文件
       • 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

4、小程序的宿主环境

宿主环境简介

1. 什么是宿主环境

   宿主环境指的是程序运行所必须的依赖环境。例如：

   Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

   

2. 小程序的宿主环境

   手机微信是小程序的宿主环境，如图所示

   

   小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：

   微信扫码、微信登录、微信支付、地理定位、ETC等

3. 小程序宿主环境包含的内容

   • 通信模型

     • 小程序中通信的主体是渲染层和逻辑层，其中：
     1. WXML模版和WXSS样式工作在渲染层
     2. JS脚本工作在逻辑层

     

     • 小程序的通信模型

       1. 渲染层和逻辑层之间的通信由微信客户端进行转发
       2. 逻辑层和第三方服务器之间的通信由微信客户端进行转发

       

   • 运行机制

     • 小程序启动过程
       1. 把小程序的代码包下载到本地
       2. 解析app.json全局配置文件
       3. 执行app.js小程序入口文件，调用App()创建小程序实例
       4. 渲染小程序首页
       5. 小程序启动完成
     • 页面渲染过程
       1. 加载解析页面的.json配置文件
       2. 加载页面的.wxml模版和.wxss样式
       3. 执行页面的.js文件，调用Page()创建页面实例
       4. 页面渲染完成

   • 组件

     • 小程序中组件的分类

       小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：

       1. 视图容器

          常用的视图容器类组件

          • view

            

          • scroll-view
            

          • swiper和swiper-item
            

            swiper组件的常用属性

            

       2. 基础内容

          

          其他常用组件：

          1. button

             • 按钮组件
             • 功能比HTML中的button按钮丰富
             • 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

             

          2. image

             • 图片组件
             • image组件默认宽度约为300px、高度约为240px

             image组件的mode属性

             ​ image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性如下：

             

             

          3. navigation

             • 页面导航组件
             • 类似于HTML中的a链接

       3. 表单组件

       4. 导航组件

       5. 媒体组件

       6. map地图组件

       7. canvas画布组件

       8. 开放能力

       9. 无障碍访问

   • API

     1. 小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。
     2. 小程序API分为了三类：
        • 事件监听API
          • 特点：以on开头，用来监听某些事件的触发
          • 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
        • 同步API
          • 特点1：以Syc结尾的API都是同步API
          • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
          • 举例：wx.setStorageSync('key','value')向本地存储中写入内容
        • 异步API
          • 特点：类似于jQuery中的$.ajax(aptions)函数，需要通过success、fail、complete接受调用的结果
          • 举例：wx.request()发起的网络数据请求，通过success回调函数接受数据

5、协同工作和发布

协同工作

了解权限管理需求

在中大型的公司里，人员的分工非常仔细：同一个小程序项目，一般会有不同岗位、不同角色的员工同时参与设计与开发。

此时出于管理需要，我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分，使他们能够高效的进行协同工作。

了解项目成员的组织结构

小程序的开发流程

成员管理

• 成员管理的的两个方面

小程序的成员管理体现在管理员对小程序项目成员及体验成员的管理：

1. 项目成员：
   • 表示参与小程序开发、运营的成员
   • 可登录小程序管理后台
   • 管理员可以添加、删除项目成员，并设置项目成员的角色
2. 体验成员：
   • 表示参与小程序内测体验的成员
   • 可使用体验版小程序，但不属于项目成员
   • 管理员及项目成员均可添加、删除体验成员

• 不同项目成员对应的权限

• 开发者的权限说明

  1. 开发者权限：可以使用小程序开发者工具及对小程序的功能进行代码开发
  2. 体验者权限：可使用体验版的小程序
  3. 登录：可登录到小程序管理员后台，无需管理员确认
  4. 开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
  5. 腾讯云管理：云开发相关设置

• 添加项目成员和体验管理员

  https://mp.weixin.qq.com/wxamp/user/manage?action=index&use_role=1&token=2121339583&lang=zh_CN

• 软件开发过程中的不同版本

  1. 开发者编写代码的同时，对项目代码进行自测（开发版本）
  2. 直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
  3. 最后修复完程序的Bug后，发布正式版供外部用户使用

• 小程序的版本

  

• 小程序发布上线的整体步骤

  1. 上传代码

     • 点击开发者工具顶部工具栏中的“上传”按钮
     • 填写版本号以及项目备注

     

     • 代码质量要符合规范（微信小程序开发的门槛很高）

       

  2. 提交审核

     登录小程序管理后台 =》管理 =》版本管理 =》开发版本，即可查看刚才提交的版本了

     

     • 为什么需要提交审核：为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方审核的。
     • 提交审核后等待官方审核就行

  3. 发布

     审核之后，管理员的微信中就会收到小程序通过审核的通知，此时在审核版本的列表中，点击“发布”按钮之后，即可把“审核通过”的版本发布为“线上版本”，供所有小程序用户访问和使用

基于小程序码进行推广

相对于普通二维码来说，小程序码的优势如下：

1. 在样式上更具有辨识度和视觉冲击力
2. 能够更加清晰地树立小程序的品牌形象
3. 可以帮助开发者更好地推广小程序

获取小程序码的5个步骤：

登录小程序管理后台 =》设置 =》基本设置 =》基本信息 =》小程序码及线下物料商城下载

查看小程序的运营数据

• 在“小程序后台”查看

  1. 登录小程序管理后台
  2. 点击侧边栏的“统计”
  3. 点击相应的tab可以看到相关的数据

  

• 使用“小程序数据助手”查看

  1. 打开微信
  2. 搜索“小程序数据助手”
  3. 查看已发布的小程序相关的数据

不要用第三方工具，建议用原生的开发工具

基于小程序码进行推广

相对于普通二维码来说，小程序码的优势如下：

1. 在样式上更具有辨识度和视觉冲击力
2. 能够更加清晰地树立小程序的品牌形象
3. 可以帮助开发者更好地推广小程序

获取小程序码的5个步骤：

登录小程序管理后台 =》设置 =》基本设置 =》基本信息 =》小程序码及线下物料商城下载

[外链图片转存中…(img-KxY0Xap9-1699341186280)]

查看小程序的运营数据

• 在“小程序后台”查看

  1. 登录小程序管理后台
  2. 点击侧边栏的“统计”
  3. 点击相应的tab可以看到相关的数据

  [外链图片转存中…(img-kqXiVk5s-1699341186280)]

• 使用“小程序数据助手”查看

  1. 打开微信
  2. 搜索“小程序数据助手”
  3. 查看已发布的小程序相关的数据

不要用第三方工具，建议用原生的开发工具