小程序初识及前置准备

点点VS叉叉
1,739 阅读15分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情

今日目标

✔ 知道什么是小程序，拥有一个小程序开发者账号。

✔ 知道小程序项目目录的构成，会使用 view、scroll-view、swiper、button、image 组件。

✔ 了解小程序的开发、管理、上线流程，尝试上线一个体验版小程序。

什么是小程序

产品视角

小程序是一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

image.png

用户视角

在微信里打开的应用。

开发视角

新的标签、新的 API（JS）、新的页面（代码）组织规则、新的 IDE。

周边生态

image.png

小程序与网页

  • 宿主环境不同：网页运行在浏览器环境中，小程序运行在微信环境中。
  • 使用 API 不同：在小程序中，无法调用 W3C 规定的 DOM 或浏览器提供的 BOM API；小程序中可以调用微信环境提供的各种 API，例如：微信支付、微信扫码、地理定位。
  • 开发模式不同：网页可以直接通过各种代码编辑器 + 浏览器进行开发调试；小程序从申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目、上线到微信提供的环境等，拥有自己的一套开发模式。

注册开发账号

打开注册页面

使用浏览器打开微信公众平台网址，点击右上角的"立即注册"即可进入到小程序开发账号的注册流程。

image.png

选择帐号类型

image.png

填写账号信息

1-6 注册账号.jpg

登录邮箱激活

image.png

点击激活链接

image.png

选择主体类型

image.png

主体登记信息

image.png

登录管理后台

注册完毕后可以登录小程序管理后台补充小程序的基本信息。

image.png

小程序 AppID

小程序 AppID 是用来创建小程序项目所需要的，有了 AppID 也可以调用一些高级的接口。

image.png

微信开发者工具

安装微信开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能有：创建小程序项目、代码的查看和编辑、小程序功能的开发和调试、小程序的预览和发布。

扫码登录开发者工具

image.png

image.png

配置外观和代理模式

  1. 设置外观，或者进入开发者工具后，可以点击设置 --> 外观设置。

image.png

  1. 设置代理，如果电脑安装了翻墙工具，导致网络不稳定，所以推荐不使用任何代理。

image.png

演示新建小程序步骤

  1. 点击 + 号，新建项目。

image.png

  1. 填写项目信息。

image.png

预览小程序两种方式

  1. 在模拟器上查看项目效果。

image.png

  1. 在真机上预览项目效果。

image.png

开发者工具界面组成

主界面的 5 个组成部分，从上到下，到左到右，依次是：菜单栏、工具栏、模拟器、代码编辑区、调试区。

1-20 编辑器的组成部分.jpg

小程序项目构成

小程序目录文件数明

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

1-21 小程序的目录构成.jpg

小程序页面组成部分

小程序官方建议把所有的小程序页面，都存放在 pages 目录中，每个页面以单独的文件夹存在，每个页面由 4 个基本文件组成，具体如下。

  1. .js 文件，页面的脚本文件，定义页面的数据、事件处理函数、生命周期等。
  2. .json 文件，当前页面的配置文件，配置页面的外观、表现等。
  3. .wxml 文件，页面的模板结构文件。
  4. .wxss 文件，当前页面的样式表文件。

1-22 小程序的页面构成.jpg

小程序中的配置文件

常见的，小程序项目中有 4 种 json 类型的配置文件，分别如下。

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

1-23 json 配置文件.jpg

app.json

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

{
    "pages": ["pages/index/index", "pages/logs/logs"],
    "window": {
        "backgroundTextStyle": "dark", // 开启下拉刷新是三个点的颜色
        "enablePullDownRefresh": true,
        "navigationBarBackgroundColor": "#fff", // 只支持 16 进制表示的
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black" // 只支持 black 和 white
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

Demo 项目里面的 app.json 配置内容如下。

1-24 app.json 文件.jpg

了解下这 4 个配置项的作用。

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

页面.json

可以对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 中的 window 中的配置项。

1-26 页面的 .json 配置文件.jpg

project.config.json

项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如。

  1. setting 中保存了项目相关的配置。
  2. projectname 中保存的是项目名称。
  3. appid 中保存的是小程序的账号 ID。

sitemap.json

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

1-25 sitemap.json 文件.jpg

如何新建小程序页面

  • 第一种方式：在 pages 文件夹上点击鼠标右键，新建文件夹 --> 输入 home，选中 home 文件夹右键，新建 Page --> 输入 home。官方推荐文件夹名称和页面的名称一致，方便后期的维护，新建页面组件的时候，不需要输入后缀名。
  • 第二种方式：在 app.json --> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。
  • 注意点：对 pages 目录下页面的删除也需要手动在 app.json 文件的 pages 数组中进行同步一下。

image.png

设置首页的两个方式

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

image.png

  1. 在 app.json 中 pages 同级，配置一个新的节点 entryPagePath 节点，传入需要设置为首页的路径即可，最终小程序项目的首页，以 entryPagePath 节点设置的为准。

image.png

image.png

关于 WXML & HTML

  1. 是什么：WXML（WeiXin Markup Language）是框架设计的一套标签语言（组件），用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

  2. WXML 和 HTML 的区别如下。

    • 标签名称不同：HTML 常见的标签是 div、span、img、a，WXML 常见的标签是 view、text、image、navigator`。
    • 标签属性不同：HTML <a href="#">超链接</a>，WXML 是 <navigator url="/pages/home/home"></navigator>。
    • 提供了类似于 Vue 中的模板语法：例如插值表达式，判断、循环等。

关于 WXSS & CSS

  1. 是什么：WXSS（WeiXin Style Sheets）用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

  2. WXSS 和 CSS 之间的区别如下。

    • 新增了 rpx 自适应尺寸单位，CSS 中需要手动进行像素单位换算，例如 REM，WXSS 在底层支持新的尺寸单位 RPX，在不同大小的屏幕上小程序会自动进行换算。
    • 提供了全局的样式和局部样式，项目根目录中的 app.wxss 会作用于所有小程序页面，局部页面的 .wxss 样式仅对当前页面生效。
    • WXSS 仅支持部分 CSS 选择器，例如 .class 和 #id、element（标签选择器）、并集选择器和后代选择器、::after 和 ::before 等伪元素选择器。

小程序中的 JS 文件

小程序中的 JS 文件主要分为三大类，分别如下。

  1. app.js，是整个小程序项目的入口文件，通过调用 App() 来启动整个小程序。
  2. 页面.js 文件，是页面的入口文件，通过调用 Page() 来创建小程序页面，并运行小程序页面。
  3. 普通的.js 文件，是普通的功能模块文件，用来封装公共的函数或属性供页面使用。

启动或渲染过程

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

小程序中的组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构，官方把小程序的组件分为了 9 大类，分别是：视图容器、基础内容、表单组件、导航组件、媒体组件、map 地图组件、canvas 画布组件、开发能力、无障碍访问等，常用的视图容器组件如下。

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

view

view 类似于 div，一般主要用来布局，实现如图的横向布局效果。

image.png

<view class="view-container">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

.view-container {
    display: flex;
    justify-content: space-between;
}
​
.view-container view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
​
.view-container view:nth-child(1) {
    background-color: lightgreen;
}
​
.view-container view:nth-child(2) {
    background-color: lightskyblue;
}
​
.view-container view:nth-child(3) {
    background-color: lightcoral;
}

scroll-view

image.png

<!-- scroll-x 属性：允许横向滚动 -->
<!-- scroll-y 属性：允许纵向滚动 -->
<!-- 注意：使用竖向滚动时，必须给 scroll-view 一个固定的高度 -->
<scroll-view class="scroll-container" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

.scroll-container {
    width: 100px;
    height: 120px;
}
​
.scroll-container view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
​
.scroll-container view:nth-child(1) {
    background-color: lightgreen;
}
​
.scroll-container view:nth-child(2) {
    background-color: lightskyblue;
}
​
.scroll-container view:nth-child(3) {
    background-color: lightcoral;
}

swiper 和 swiper-item

image.png

<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper indicator-dots class="swiper-container">
    <!-- 第一项 -->
    <swiper-item>
        <view>A</view>
    </swiper-item>
    <!-- 第二项 -->
    <swiper-item>
        <view>B</view>
    </swiper-item>
    <!-- 第三项 -->
    <swiper-item>
        <view>C</view>
    </swiper-item>
</swiper>

.swiper-container {
    /* 轮播图容器的高度 */
    height: 150px;
}
​
.swiper-container swiper-item view {
    height: 100%;
    line-height: 150px;
    text-align: center;
}
​
.swiper-container swiper-item:nth-child(1) view {
    background-color: lightgreen;
}
​
.swiper-container swiper-item:nth-child(2) view {
    background-color: lightblue;
}
​
.swiper-container swiper-item:nth-child(3) view {
    background-color: lightcoral;
}

swiper 组件的常用属性文档

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动

text 和 rich-text

  1. 常用的基础内容组件如下。

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

  2. 通过 text 组件的 user-select 属性，实现长按选中文本内容的效果。

<!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
<view>
    手机号支持长按选中效果
    <text user-select>13812345678</text>
</view>
  1. 通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构。
<!-- 应用场景 -->
<rich-text nodes="<h2 style='color: red'>我是h2标题</h2>"></rich-text>

button

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

属性名类型默认值说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称是否带 loading 图标
<view>~~~ 通过 type 指定按钮类型 ~~~</view>
​
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
​
<view>~~~ size="mini" 小尺寸按钮 ~~~</view>
​
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>
​
<view>~~~ plain 镂空效果 ~~~</view>
​
<button plain size="mini">默认按钮</button>
<button plain size="mini" type="primary">主色调按钮</button>
<button plain size="mini" type="warn">警告按钮</button>

image

官方文档，src 属性支持本地和网络上的图片，mode 属性指定图片的裁剪、缩放的模式。

<!-- 1. 空图片，默认 320 * 240 -->
<image></image>
​
<!-- 2. 使用 src 指向本地图片路径 -->
<image src="/images/icon.jpg"></image>
​
<!-- 3. 使用 src 指向网络图片路径 -->
<image src="http://www.itcast.cn/2018czgw/images/logo.png"></image>

image {
    border: 1px solid red;
}

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

mode 值说明
scaleToFill默认值，缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来并顶满 image，短边自适应。
widthFix缩放模式，图片顶满 image 的宽度，image 的高度自动跟着图片等比变化。
heightFix缩放模式，图片顶满 image 的高度，image 的宽度自动跟着图片等比变化。

小程序协同工作

了解权限管理需求

在中大型的公司中，人员的分工非常仔细：同一个小程序项目，一般会有不同岗位、不同角色的员工同时参与设计与开发，此时出于管理需要，我们迫切需要对不同的岗位、不同的角色的员工的权限进行边界的划分，使他们能够高效的进行协同开发。

小程序的开发流程如下。

image.png

小程序成员的管理

小程序成员管理体现在管理员对小程序项目成员及体验成员的管理，后台入口。

image.png

  1. 项目成员：表示参与小程序开发、运营的成员，他们也可以登陆这个小程序管理后台。管理员添加项目成员的时候，也可以设置对应的权限，例如运营者权限、开发者权限、数据分析者等。
  2. 体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员，管理员及项目成员均可添加、删除体验成员。

开发者的权限说明

  1. 不同项目成员对应的权限，项目成员分为三个角色： 运营成员、开发人员、数据分析者。

image.png 2. 开发者的权限说明如下。

-   登录权限：可登录小程序的后台管理，无需要管理员确认。
-   开发者权限：可使用小程序开发者工具及对小程序的功能进行代码管理。
-   管理者权限：例如设置小程序服务器域名。
-   体验者权限：可使用体验版小程序。

如何添加对应成员

主要分为项目成员和体验成员。

image.png

了解小程序发布

了解小程序的版本阶段

  1. 软件开发过程中，根据时间节点的不同，会产出不同的软件版本。

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

  2. 小程序的版本，版本审核是微信官方进行审核，审核周期一般是 3 ~ 7 天。

image.png

了解发布上线主要步骤

  1. 小程序发布上线一般要经过上传代码 --> 提交审核 --> 发布这三个步骤。
  2. 上传代码：点击开发者工具顶部工具栏中的“上传”按钮，填写版本号以及项目备注。

image.png

  1. 在后台查看上传之后的版本，登录小程序管理后台 --> 管理 --> 版本管理 --> 开发版本，即可查看刚才上传的版本。

image.png

  1. 提交审核。

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

image.png

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

image.png

基于小程序码进行推广

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

查看小程序的运营数据

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

发布一个小程序

codepen

avatar
文章
阅读
粉丝