微信小程序入门篇

1.小程序简介

1.1小程序与网页开发的区别

• 运行环境不同：网页在浏览器环境、小程序在微信支付宝等环境

• API不同：不发使用DOM和BOM的API，可使用微信环境提供API如支付、扫码、定位

• 开发模式不同（主要区别）：网页开发是浏览器+代码编辑器；小程序是申请账号+安装小程序开发者工具+创建配置项目

1.2 体验小程序

使用最多的是组件和接口

1.3 注册小程序开发账号

https://mp.weixin.qq.com/ 进入网址，点击注册，选择小程序，填写信息

获取appID：登录网址=>开发=>开发设置=>AppID

注意：选择个人主体，不支持微信认证，微信支付，高级接口能力

1.4 安装微信开发者工具

1.4.1微信开发者工具的功能：

• 快速创建小程序项目

• 代码的查看和编辑

• 小程序功能测试

• 小程序的预览和发布

1.4.2下载

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

打开网址--稳定版--下载-安装

安装成功--扫码登录--创建项目

1.4.3 设置外观和代理

外观--主题--字号18--行距12

代理设置--不使用任何代理，勾选直接连网络（系统代理会影响代理软件）

1.5创建第一个小程序项目

新建--后端服务：不使用云服务--JavaScript

编译：编译器运行（常用）

预览：微信扫码预览

帮助--开发者文档：常用查看API

2.代码构成

2.1 项目目录介绍

• pages: 存放小程序页面

• utils：存放工具性质的模块（例如格式化时间的自定义模块）

• app.js: 入口文件

• app.json: 全局配置文件

• app.wxss: 全局样式文件

• project.config.json: 配置文件

• sitemap.json: 配置小程序以页面是否被微信索引

2.2 页面的组成部分

小程序的页面都放在pages文件夹中，以单独的文件夹存在

其中每个页面又四个基本页面组成

• js文件：脚本文件，存放页面数据，事件处理

• json文件：页面的配置文件，配置窗口外观，表现

• wxml文件：模板文件

• wxss文件：样式文件

2.2.1 json配置文件

json是一种数据格式，以配置文件形式出现，可对小程序项目进行不同级别的配置

小程序中有四种json配置文件：

• app.json 全局配置文件：pages全局记录页面；window全局定义页面背景色，文字颜色等；style全局定义组件样式；sitemapLocation:指定sitemap.json的位置

• project.config.json项目配置文件： 记录个性化配置；setting编译配置；projectname项目名称；appid 保持小程序的账号ID

• sitemap.json配置文件：类似PC的SEO引擎搜索是否运行，action：disallow/allow；在config.json里checkSiteMap: false关闭索引提示

• 每个页面的json文件：本页面外观配置，会覆盖app.json中相同的配置项

ctrl+k+c注释快捷键

2.2.2 wxml 文件

微信小程序的标签语言，类似HTML

2.2.2.1WXML和HTML的区别

1. 标签名称不同：div-view, span-text, img-image, a-navigator

2. 属性节点不同:<a href="#">百度</a>，<navigator url="/pages/index/index"></navigator>

3. wxxl有vue中的模板语法:数据绑定，列表渲染，条件渲染

2.2.3 wxss文件

2.2.3.1 wxss 与css区别

1. 新增rpx尺寸单位：css需用rem进行像素单位换算，wxss用rpx在不同屏幕会自动换算

2. 提供全局样式和局部样式：app.wxss是全局的样式，每个页面的wxss样式对当前样式有效

3. wxss仅支部分持css选择器：class、id、element、并集、后代、::after/before伪元素选择器等

2.2.4 js文件

小程序中js文件分三大类

1. app.js文件：入口文件

2. 页面上的js：页面入口文件调用Page()函数创建并运行页面

3. 普通的js文件：普通的功能模块文件，用来封装公共的函数或属性使用；如utils-util.js文件

2.3 新建小程序页面

app.json--pages新增页面存放路径，小程序开发者工具会自动创建页面文件

2.4 修改项目首页

app.json -- pages 数组中页面路径的前后顺序，第一个就是首页

3.宿主环境

3.1 宿主环境介绍

• 宿主环境是指程序运行所必须的依赖环境

• 例如Android系统和IOS系统是两个不同的宿主环境，安卓的微信是不能在IOS环境下运行的，安卓的宿主环境是Android，脱离了宿主环境的软件是没有意义的

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

3.2小程序的宿主环境

小程序宿主环境包含以下四个：通信模型、运行机制、组件、API

3.2.1通信模型

1、小程序的通信的主体是渲染层和逻辑层

渲染层：wxml模板、wxss样式

逻辑层：js脚本文件

2、小程序的通信分两部分

渲染层和逻辑层之间通信：微信客户端转发

逻辑层和第三方服务器之前的通信：微信客服端转发

3.2.2 运行机制

小程序启动过程

• 代码下载到本地

• 解析app.json全局配置文件，调用App()创建小程序实例

• app.js入口文件

• 渲染小程序首页

• 小程序启动完成

小程序页面渲染过程

• 加载解析页面json文件

• 加载渲染层：wxml模板和wxss样式

• 执行页面js文件：调用Page()创建页面实例

• 页面渲染完成

3.2.3组件

小程序组件是由宿主环境提供的，组件可快速搭建页面，组件分为了以下九大类

3.2.3.1视图容器

① view

• 普通的视图区域

• 类似div，是一个块级元素

<!--pages/test/test.wxml-->
<!-- 横向布局flex-direction: row -->
<view class="row">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>
<text>我是一条分割线~</text>
<!-- 纵向布局 flex-direction: column -->
<view class="row" style="flex-direction: column;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

/* pages/test/test.wxss */

/* 横向布局 */
.row {
  display: flex;
  flex-direction: row;
  /* 纵向布局 */
  /* flex-direction: column; */
}
.row view {
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
}
.row view:nth-child(1) {
  background-color: pink;
}
.row view:nth-child(2) {
  background-color: greenyellow;
}
.row view:nth-child(3) {
  background-color: rgb(115, 214, 218);
}

②scroll-view

• 可滚动的视图区域

• 实现滚动列表的效果

• 加scorll-y纵向滚动，scorll-x横向滚动

<scroll-view class="row" scroll-y="true" style="height: 100rpx;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
<text>我是一条分割线~</text>
<scroll-view class="row" scroll-x="true" style="width: 100rpx;white-space: nowrap;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

③swiper和swiper-item

轮播图容器组件和轮播图item组件

<swiper    indicator-dots     indicator-color="pink" autoplay interval="1000">
  <swiper-item>a</swiper-item>
  <swiper-item>b</swiper-item>
  <swiper-item>c</swiper-item>
</swiper>

④基础容器组件text和rich-text

• text组件

类似span标签，是行内元素

只有text在支持长按选择功能，view不支持

• rich-text组件

富文本组件，通过node属性把html结构转为ui结构

<text selectable>长按选中</text>
<rich-text nodes="<h1 style='color:red'>标题"></rich-text>

⑤其他常用组件

• button

功能比原生的丰富：open-type属性可以使用微信的功能（客服、转发、授权、获取用户信息）

• image

默认高度width为300px，height为240px

mode 属性指定图片的裁剪和缩放

<!-- 图片不改变比例，容器大小有留白 -->
<image src="/images/15.jpg" mode="aspectFit"/> 
<!-- 图片不改变元比例，会缩放图片，填充容器 -->
<image src="/images/15.jpg" mode="aspectFill"/>
<!-- 缩放模式，高度/宽度不变，宽度/高度自适应 -->
<image src="/images/15.jpg" mode="widthFix"/>
<image src="/images/15.jpg" mode="heightFix"/>

• navigator

页面导航组件，类似a标签

3.2.4 API

小程序的API 是微信宿主环境提供的，可调用微信功能，如获取用户信息、本地存储、支付等

小程序的API分为事件监听API、同步API、异步API

3.2.4.1 事件监听API

• 特点：on开头，监听事件触发

• 如wx.onWindowResize

3.2.4.2 同步API、

• 特点1：以sync结尾的API

• 特点2：可以通过函数返回值直接获取，如果执行出错就会抛出异常

• 如：wx.setStorageSync(string key, any data),向本地存储写入内容

3.2.4.3 异步API

• 特点：类似jquery的$ajax函数，通过success、fail、complete接收调用结果

• 如wx.request()发送网络请求，通过success回调函数接收数据

注意：编写样式类型时，不要和全局样式类名相同！！会导致样式不生效

1. • 协同工作和发布

4.1 协同工作

4.1.1 管理权限和成员管理

• 权限管理的需求

同一个项目的开发，会有不同岗位，不同人员参与开发

• 项目成员的组织结构：

• 小程序的开发流程

• 成员管理

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

4.1.2 开发权限和维护项目成员

维护项目成员：https://mp.weixin.qq.com/wxamp/user/manage

4.2 发布

4.2.1 软件开发版本

• 开发版：开发者在开发过程中进行自测的版本

• 体验版：开发版稳定时，产品经理和测试人员进行体验

• 正式版：bug修复完后，提供用户使用

4.2.2 小程序开发版本

• 开发版：使用开发者工具开发提交审核代码，开发版代码删除对审核版和上线版没有影响

• 体验版：选择一个开发版本作为体验版

• 审核版：只有一份代码处于审核版，审核通过变成线上版

• 线上版：供全部用户使用的版本，新代码发布后会覆盖原有的版本

4.2.3 发布上线

小程序发布上线步骤：

• 上传代码--提交审核--发布

①代码上传：上传（右上角）--填写版本号和备注

后台查看版本：登录小程序管理后台--版本管理--开发版本

②提交审核：为了保证质量，符合相关的规则，需要通过腾讯官方审核

登录小程序管理后台--开发版本-提交审核

③发布：当审核通过，审核版本--发布即可

4.2.4 小程序推广

4.2.4.1 小程序码的推广

小程序码推广的优势

• 比普通二维码具有辨识度，冲击力

• 清晰的树立小程度的形象

• 帮助开发者更好的推广小程序

获取小程序二维码步骤：

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

5.2.5 运营数据

查看运营数据的两种方式

1. 小程序后台查看：小程序管理后台--统计--手机查看数据（右上角）

2. 小程序运营助手查看：微信--搜索小程序数据助手

注：笔记来源于黑马程序员