微信小程序入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/jintianzheng/article/details/115893481

微信小程序基础入门

1. 概述

1.1 什么是微信小程序

张小龙：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

但是微信小程序其实不是一个新事物，从理念上来讲，就像360安全卫士之于360完全卫士里的各种系统工具，QQ之于QQ右下角的“应用宝”，而从技术角度上，微信小程序的架构借用了某些开发框架的概念，如ReactNative，定义了一套自由的组件，并根据运行环境不同（iOS、Android），将这些组件编译或转化为对应平台的可运行组件。

1.2 移动APP开发对比

WebApp NativeApp HybridApp 微信小程序是目前四种主流的移动开发方向

1.2.1 WebApp

百度百科的定义：基于web的系统和应用，运行于网络和浏览器之上，目前多采用h5标准开发。在使用上的具体表现是，手机浏览器点击进入，其实就移动端网页

优点：不需要安装包，节约手机空间，整体量级轻，开发成本低，基于浏览器，可以跨平台使用

缺点：交互体验感觉较差，不能调用摄像头、系统通知、通讯录、麦克风等设备接口。

1.2.2 NativeApp

Native App是一种基于智能手机本地操作系统如iOS、Android并使用原生程式编写运行的第三方应用程序,也叫本地app。这种原生程序依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。

优点：用户体验最佳，操作速度快，上手流畅，可以访问设备接口(摄像头、系统通知、通讯录、麦克风)

缺点：开发成本高（致命），不同系统的App需要独立开发，审核周期长

1.2.3 HybridApp

Hybrid APP就是 native app 与 web app的混合。兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势” 。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。

原理就是在native app里内置H5，合适的功能页面采用网页的形式呈现。比如京东的某些营销页面，今日头条的某些新闻页面、微信的腾讯新闻的内容页面等。

优点：除了nativeApp和webApp有点，一大原因是可以进行“热更新”，不再受限于审核、上线等等繁复的流程。

缺点：仍然需要下载，不能跨平台。

混合式 APP 是目前最火的一种形式。

开发成本低，用户体验很好。移动开发工程师，核心技术前端开发，+IOS，+Android，reactNative 混合开发框架。

1.2.4 微信小程序

微信小程序不属于上面3种中的任何一种，但又拥有上面3种的优势，如：接近于Native的用户体验和访问速度，具有设备接口的访问能力，和Hybrid一样具有较为简单的开发逻辑，又像web开发一样的容易上手,开发和部署效率很高。

当然也有缺点，由于小程序是基于微信的UI上，限制了一些对UI产品要求较高的产品设计发挥，并且从开发角度上来看，由于微信小程序给出了自己的一套组件，不支持自由访问HTMLDOM，导致一些经典的开发框架无法使用。

总之，由于微信的社交工具的天然优势，微信小程序一定会有自己的一片应用天地。而对于开发者领域而言，目前微信小程序不会成为独立的一类职位，绝大多数熟悉HTML、CSS、Javascript的前端开发工程师通过简单的学习，都能够胜任微信小程序的开发。下面，我们就来学习的如何开发微信小程序。

2. 开发环境搭建

2.1 注册账号

官网注册https://mp.weixin.qq.com/

第一步：选择小程序入口并点击查看详情，进入注册页面

选择入口

在这里插入图片描述

点击按钮

在这里插入图片描述

进入注册流程

在这里插入图片描述

在填写注册信息需要使用邮箱激活，之后会提示登录邮箱，并完成信息登记

在这里插入图片描述

在完成信息登记时，会提示选择主体类型，我们这里学习开发微信小程序，所以选择**“个人”**即可。
注册后，还需要验证身份

在这里插入图片描述

完成

在这里插入图片描述

2.2 微信web开发者工具

下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

选择下载版本

在这里插入图片描述

下载完成后，进行安装，完成后在电脑左面上会有图标显示

在这里插入图片描述

2.3 新建一个项目

打开微信Web开发者工具，新建一个小程序，如果是第一次打开或者长时间未打开，开发者工具都会弹出一个二维码，提示用户使用微信“扫一扫”进行登录，而登录的身份就是自己的微信号，之后会看到一个选择界面，选择小程序项目后，会提示新建一个项目或打开一个已有项目

在这里插入图片描述

创建一个小程序项目，需要填写AppID：

在这里插入图片描述

在微信小程序网站上查找自己的的AppID，而这个AppID对于微信小程序开发很重要

在这里插入图片描述

选择好项目路径，填好AppID，并为项目命名：

在这里插入图片描述

2.4 界面

2.4.1 模拟器、编辑器、调试器

在这里插入图片描述

模拟器可以直观地在开发者工具里预览项目效果，后编译按钮后边的预览按钮效果类似，预览按钮点开后，可以使手机扫码后在手机上预览

在这里插入图片描述

2.4.2 编译

普通编译就是默认编译，直接就能查看页面效果

在这里插入图片描述

如果需要对某个页面设置特定后台场景编译时，就要选择自定义编辑

在这里插入图片描述

定义后也可以再去修改或删除：

在这里插入图片描述

2.4.3 切后台

模拟各种后台场景

在这里插入图片描述

2.4.4 清缓存

清理缓存数据

在这里插入图片描述

2.4.5 详情

在这里插入图片描述

其中，es6转es5选项和上传代码时样式自动补全，都是为了确保项目具有更好的版本兼容性，而上传代码时自动压缩混淆，是为了减少代码体积及保证项目源码的安全性。

2.5 代码结构

微信小程序里没有对DOM的操作，更像是Vue框架，主要通过配置参数和提供数据来设置页面的。

2.5.1 pages文件夹

pages文件夹，用来书写各个页面代码以及组件。内部js文件书写js ; wxml文件为HTML ; wxss文件为css样式； json文件为配置当前页面的默认项，如title等

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。

现在就让我们看看wxml、wxss和传统HTML、CSS的区别之处

2.5.1.1 wxml

wxml和html的主要的区别，就是标签名字有点不一样，往往写 HTML 的时候，经常会用到的标签是 div , p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。

可以看到，小程序的 WXML用的标签是 view, button, text等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

详情参考官网:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxml-模板

在这里插入图片描述

通过 {% raw %}{{% endraw %}{ }}的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx:开头的属性来表达。

2.5.1.2 WXSS

wxss具有 CSS大部分的特性，也做了一些扩充和修改：

新增了尺寸单位

在写 CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位 rpx，开发者可以免去换算的烦恼。

原理就是小程序会自动在不同的分辨率下进行转换，简单理解为我们适配屏幕的rem，因为小程序将根字号和屏幕尺寸在底层已经换算过了，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差，大部分时候可以忽略不计

在小程序中，由于使用iPhone6、7、8的设计稿，iPhone7下 1px = 1rpx = 0.5pt

pt 也称为逻辑分辨率，pt 的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位
px 指物理分辨率，和屏幕尺寸没有关系，表示一个点

一个pt可以由1个px构成，也可以是2个、3个。这个就是移动设备屏幕上的Reader倍数关系，如iPhone6、iPhone7的 @2x ; iPhone7 Plus的 @3x。
iPhone7上的一个pt就由2个px点构成，我们的设计稿一般是以px值进行设计

此外 WXSS 仅支持部分 CSS 选择器
全局的样式和局部样式的使用技巧：
可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

2.5.2 utils文件夹

用来存放全局方法，我们会在App逻辑交互的章节详细讲解。

2.5.3 app全局文件

app.js 用来存放全局方法
app.json 用来存放全局配置
app.wxss 用来存放全局样式

首先我们来学习App全局样式的配置

3、App全局样式配置

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。快速创建的项目里边的 app.json里有两个字段：

pages字段 — 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 — 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他更多字段，可以查看官网API文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

3.1 配置项目路径

{
  "pages":[
    "pages/index/index",
    "pages/usercenter/usercenter",
    "pages/detail/detail",
    "pages/news/news",
    "pages/logs/logs"
  ]
}

在这里插入图片描述

3.2 配置窗口顶部样式

{
  "pages":[
    "pages/index/index",
    "pages/usercenter/usercenter",
    "pages/detail/detail",
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffa15c",
    "navigationBarTitleText": "完美校园",
    "navigationBarTextStyle":"#fff"
  },

对应的窗口效果是：

在这里插入图片描述

3.2 配置底部内容和样式

配置底部内容和样式，需要自定义的tabBar字段

通过查看官网API，找到tabBar的部分：

这里我们按照效果图配置4个toolbar选项：

在这里插入图片描述

在app.json里的page对象里，设置tabBar的list属性, 其中 list 接受一个数组，只能配置最少2个、最多5个 tab，需要将上图中的images图片放到项目目录里，后配置如下：

  "tabBar":{
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"pages/images/icon/home_2.png",
        "selectedIconPath":"pages/images/icon/home_1.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "通知",
        "iconPath": "pages/images/icon/news_2.png",
        "selectedIconPath": "pages/images/icon/news_1.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "新闻",
        "iconPath": "pages/images/icon/read_2.png",
        "selectedIconPath": "pages/images/icon/read_1.png"
      },
      {
        "pagePath": "pages/usercenter/usercenter",
        "text": "我的",
        "iconPath": "pages/images/icon/user_2.png",
        "selectedIconPath": "pages/images/icon/user_1.png"
      }