小程序~一点笔记补充

小凡爱睡觉
75 阅读7分钟

小程序的宿主环境~组件

1 小程序中组件的分类

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

  • 1 视图容器
  • 2 基础内容
  • 3 表单组件
  • 4 导航组件
  • 5 媒体组件
  • 6 map地图组件
  • 7 canvas画布组件
  • 8 开发能力
  • 9 无障碍访问

2 常用的视图容器类组件

1 view

  • 普通视图区域
  • 类似于 HTML中的div，是一个块级元素
  • 常用来实现页面的布局效果 2 scroll-view
  • 可滚动的视图区域
  • 常用来实现滚动列表效果 3 swiper 和 swiper-item 轮播图容器组件 和 轮播图 item 组件

3 view组件的基本使用

实现如图的 flex横向布局效果

image.png

4 scroll-view 组件的基本使用

实现如图的纵向滚动效果:

image.png

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

实现如图的轮播图效果:

image.png

6 swiper 组件的常用属性

image.png

7 常用的基础内容组件

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

8 text组件的基本使用

通过text组件的 selectable属性，实现长按选中文本内容的效果:

image.png

9 rich-text组件的基本使用 通过 rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构.

image.png

10 其他组件

1 button

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

2 image

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

3 navigator

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

11 button按钮的基本使用

image.png

12 image 组件的基本使用

image.png

13 image组件的mode属性

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

image.png

小程序的宿主环境API

1 小程序API概述

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力， 例如:获取用户信息，本地存储，支付功能等。

2 小程序的API的3大分类

小程序官方把API分为了如下3大类:

1 事件监听API

  • 特点: 以on开头，用来监听某些事件的触发
  • 举例: wx.onWindowResize(fuction callback)监听窗口尺寸变化的事件

2 同步 API

  • 特点1:以Sync结尾的API都是同步API
  • 特点2:同步 API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
  • 举例: wx.setStorageSync('key','value')向本地存储中写入内容

3 异步 API

  • 特点:类似于JQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
  • 举例:wx.request()发起网络数据请求，通过success回调函数接收数据

协调工作和发布-协调工作

1 了解权限管理需求

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

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

2 了解项目成员的组织结构

image.png

3 小程序的开发流程

image.png

协调工作和发布-小程序成员管理

1 成员管理的两个方面

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

1 项目成员

表示参与小程序开发、运营成员 可登录小程序管理后台 管理员可以添加、删除项目成员、并设置项目成员的角色

2 体验成员

表示参与小程序内侧体验的成员 可使用体验版小程序，但不属于项目成员 管理员及项目成员均可添加、删除体验成员

image.png

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

image.png

3 开发者的权限说明

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

4 添加项目成员和体验成员

image.png

协调工作和发布-小程序的版本

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

在软件开发过程中，根据时间节点的不同，会产出不同的软件版本，列如:

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

2 小程序的版本

image.png

协调工作和方布-发布上线

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

一个小程序的发布上线，一般要经过上传代码-提交审核-发布这三个步骤

2 上传代码

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

image.png

3 在后台查看上传之后的版本

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

image.png

4 提交审核

  • 为什么需要提交审核:为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方审核的。
  • 提交审核的方式: 在开发版本的列表中，点击"提交审核"按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核

image.png

5 发布

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

6 基于小程序码进行推广

  • 相对于普通二维码来说，小程序码的优势如下:
  • 1 在样式上更具辨识度和视觉冲击力
  • 2 能够更加清晰地树立小程序的品牌形象
  • 3 可以帮助开发者更好地推广小程序

获取小程序码的5个步骤

  • 登录小程序管理后台-设置-基本设置-基本信息-小程序码及线下物料下载

image.png

协调工作和发布-运营数据

1 查看小程序运营数据的两种方式

1 在"小程序后台" 查看

  • 登录小程序管理后台
  • 点击侧边栏的"统计"
  • 点击相应的tab可以看到相关的数据 2 使用"小程序数据助手"查看
  • 打开微信
  • 搜索"小程序数据助手"
  • 查看已发布的小程序相关的数据

总结

  1. 能够知道如何创建小程序项目
  • 微信开发者工具的使用、appID的获取
  1. 能够清楚小程序项目的基本组成结构
  • app.js,app.json,app.wxss,pages文件夹
  1. 能够知道小程序页面由几部分组成
  • wxml,wxss,json,js
  1. 能够知道小程序中常见的组件如何使用
  • view,text,image
  1. 能够知道小程序如何进行协同开发和发布
  • 成员管理、发布小程序、查看运营数据
avatar
文章
阅读
粉丝