微信小程序DAY1

这不是小陆

已于 2022-07-22 00:43:53 修改

阅读量460

点赞数 2

分类专栏：笔记文章标签：微信

于 2022-07-19 18:02:59 首次发布

本文链接：https://blog.csdn.net/m0_62611836/article/details/125877769

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

微信小程序学习笔记

DAY01

程序的宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。Android系统和iOS系统是两个不同的宿主环境，即Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。

小程序的宿主环境

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

小程序是基于微信这个环境进行安装的，小程序借助宿主环境提供的能力，完成许多普通网页无法完成的功能。

小程序宿主环境都包含了哪些内容

通信模型

通信的主体

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

小程序的通信模型分为两部分：
1. 渲染层和逻辑层之间的通信
  - 由微信客户端（Native）进行转发
2. 逻辑层和第三方服务器之间的通信
  - 由微信客户端进行转发
3. 逻辑层和第三方服务器之间的数据交流，中介是微信客户端。
  - 微信客户端（Native）和第三方服务器进行数据交流（数据请求&数据响应）
  - 微信客户端向第三方服务器进行数据请求，第三方服务器对微信客户端实现数据响应
运行机制

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

组件

小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了九大类：
1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问
常用的视图容器类组件
1. view
  - 普通视图区域
  - 类似于HTML中的div，是一个块级元素
  - 常用来实现页面的布局效果
2. scroll-view
  - 可滚动的视图区域
  - 常用来实现滚动列表效果
3. swiper和swiper-item
  - 轮播图容器组件和轮播图item组件
view组件的基本使用

见F:\WeChat小程序开发平台\Default Directory\miniprogram-2\demo1
scroll-view组件的基本使用

见F:\WeChat小程序开发平台\Default Directory\miniprogram-2\demo2

移动端项目里的左（右）侧的滚动列表效果可以基于scroll-view组件完成

外包框架为scroll-view

横线滚动：添加scroll-x属性（限定宽度）

纵向滚动：添加scroll-y属性（限定高度）

swiper和swiper-item组件的基本使用

<!--utils/demo03/demo03.wxml-->
<!--轮播图区域-->
<swiper class = "swiper-container" indicator-dots>
<!--图一-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--图二-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--图三-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

indicator-dots 属性：显示面板指示点

不写该属性则无指示点

swiper组件常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

常用的基础内容组件
1. text
  - 文本组件
  - 类似于HTML中的span标签，是一个行内元素
2. rich-text
  - 富文本组件
  - 支持把HTML字符串渲染为WXML结构
text组件的基本使用

通过text组件的selectable属性，实现长按选中文本内容的效果（小程序中也只有text组件支持长按选择操作）
rich-text组件的基本使用

通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：

（例如：商品详情页，服务器返回的是一串HTML标签，希望将这一串HTML标签渲染成WXML格式的文本在放到小程序中，通过rich-text的nodes属性实现）
其他常用组件
1. button
  - 按钮组件
  - 功能比HTML中的button按钮丰富
  - 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
2. image
  - 图片组件
  - image组件默认宽度约300px，高度约240px
3. navigator
  - 页面导航组件
  - 类似于HTML中的a链接
button按钮的基本使用

正常size大小的按钮独占一行，mini的按钮为行内

默认按钮为黑字白底

primary主色调按钮为白字绿底

warn警告按钮为红字灰底

plain镂空：加边框，均为白底

**注意：**可以通过app.json文件中的"style": “v2"节点来控制其他组件的样式为最新样式还是旧版样式，默认情况下"style”: "v2"就代表最新样式

image组件的基本使用

<!--空图片-->
<image></image>
<!--使用src指定图片路径-->
<image src="/images/20.jpg"></image>
<!--路径里的斜线就代表根目录-->

image组件里的mode属性

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

mode值	说明
scaleToFill	（默认值）缩放模式，不保持横纵比缩放图片，使图片的宽高完全拉伸至填满image元素（可能会导致图片失真）
aspectFit	缩放模式，保持横纵比缩放图片，使图片的长边能完全显示出来也就是可以完整地将图片显示出来
aspectFill	缩放模式，保持横纵比缩放图片，只保证图片的短边能完全显示出来也就是图片通常只在水平或垂直方向上是完整的，另一个方向将会发生截取
widthFix	缩放模式，宽度不变，高度自动变化保持原图宽高比不变（等比例扩大或缩小）
heightFix	缩放模式，*高度不变，宽度自动变化保持原图宽高比不变**

API
1. 小程序API概述
  
  小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，example：获取用户信息、本地储存、支付功能等
2. 小程序API得大分类
  1. 事件监听API
    - 特点：以on开头，用来监听某些事件的触发
    - 举例:
      
      wx.onWindowResize(function callback)监听窗口尺寸变化的事件
      
      （wx是可以全局直接调用的）
  2. 同步API
    - 特点1.以Sync结尾的API都是同步API
    - 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常
    - 举例：
      
      wx.setStorageSync(‘key’,‘value’)向本地储存中写入内容（key是对应内容的键，value是对应内容的值）
  3. 异步API
    - 特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete；接收调用的结果
    - 举例：
    - wx.request()发起网络数据请求，通过success回调函数接收数据（成功执行success，失败执行fail)

协同工作和发布

协同工作

了解权限管理需求

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

出于管理需要，我们迫切需要对不同岗位、不同角色的员工权限进行边界的划分，使他们能够高效的进行协同工作
了解项目成员的组织结构

项目管理者（统筹整个项目的进展和风险把控小程序对外发布的节奏）
1. 产品组（提需求）
2. 设计组（出设计方案）
3. 开发组（代码开发）
4. 测试组（项目测试）
小程序的开发流程

产品组提出需求

设计组进行设计

开发组进行开发

产品组和设计组进行体验

测试组进行测试

管理者发布

小程序成员管理

成员管理的两个方面

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

不同项目成员对应的权限

权限	运营者	开发者	数据分析者
开发者权限		√
体验者权限	√	√	√
登录	√	√	√
数据分析			√
微信支付	√
推广	√
开发管理	√
开发设置		√
暂停服务	√
解除关联公众号	√
腾讯云管理		√
小程序插件	√
游戏运营管理	√

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

进入小程序管理后台，在成员管理中添加项目成员和体验成员

小程序的版本

软件开发中的不同版本

在软件开发过程中，根据时间节点的不同，会产出不同的软件版本
- 开发者编写代码的同时，对项目代码进行自测（开发版本）
- 直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
- 最后修复完程序的Bug之后，发布正式版供外部用户使用

小程序的版本

版本阶段	说明
开发版本	使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本	可以选择某个开发版本作为体验版，并选取一份体验版
审核中版本	只能有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原审核版本
线上版本	线上所有用户使用的代码版本，该版本在新版本代码发布后被覆盖更新

发布上线

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

上传代码 -> 提交审核 -> 发布
上传代码
- 点击开发者工具顶部工作栏中的上传按钮（需要正规的Appid，测试号不可上传）
- 填写版本号以及项目备注
在后台查看上传之后的版本

登录小程序管理后台->管理->版本管理->开发版本，即可查看刚提交上传的版本
提交审核
- 为了保证小程序的质量，以及符合相关的规范，小程序的发布时需要经过腾讯官方审核的
- 提交审核的方式：在开发版本的列表中，点击“提交审核”的按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核
发布

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

相比普通二维码来说，小程序码：
- 在样式上更具辨识度和视觉冲击力
- 能够更加清晰地树立小程序的品牌形象
- 可以帮助开发者更好的推广小程序
- 获取小程序码的5个步骤：
  
  登录小程序管理后台->设置->基本设置->基本信息->小程序码及线下物料下载