《微信小程序开发实战》学习笔记chapter1微信小程序人门_微信开发者工具win7

Chapter01 微信小程序入门

1. 微信小程序介绍

1.1 什么是微信小程序

微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用。微信小程序和微信的原生功能应用在本质上是一样的，都是Web App。

微信小程序与原生App的关系图:

---

补充：

1. 小程序

   （1）小程序：是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。从2017年微信首次推出小程序开始，经过四年发展，11大平台推出各自小程序生态，小程序成为真正意义上的中国人定义的“互联网新技术标准”。

   （2）行业概况：随着小程序的不断发展，截至2021年上半年，全网小程序数量突破700万个，其中，微信小程序是行业主流，数量超过430万个，占比高达约61.43%。

   其中，微信小程序的行业概况：

   2020年，我国微信小程序日活跃用户数（DAU，Daily Active User） 超过4亿，同比增长21.2%；活跃小程序增长75%。

   2021年，我国微信小程序日活跃用户数超过4.5亿，同比增长12.5%；活跃小程序则增长 41%。

   [资料来源]  华经产业研究院发布的《2021-2026年中国微信小程序市场深度分析及投资战略咨询报告》

2. 微信小程序与微信订阅号、服务号的区别

   对比项	小程序	订阅号和服务号
   加载及组件	加载慢，专门提供组件	加载快，使用风格统一且近乎原生的页面组件
   运营后台	实时数据	非实时数据
   接口数量	丰富的接口，如文件操作、设备相关、动画等	接口数量比较少，只提供有限的功能，受限于浏览器

---

拓展：

1. Web App（网页应用）是一种通过H5页面技术实现的，和Native App的功能和界面几乎一样的手机App形态。

2. Native APP（本地应用）指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。

   项目	Web App（网页应用）	Hybrid App（混合应用）	Native App（原生应用）
   开发成本	低	中	高
   维护更新	简单	简单	复杂
   体验	差	优	优
   Store或market认可	不认可	认可	认可
   安装	不需要	需要	需要
   跨平台	优	优	差

   Native APP遇到的三大困境：

   （1）虽然用户手机里的Native APP数量在增多，但日均启动个数却在减少；

   （2）用户的使用时长不断向高频Native APP集中，加剧了头部效应；

   （3）对于低频和不知名的Native App，则面临着更严峻的“分发”和“使用”长尾困境。

   这三大困境对开发者形成了较大的挑战：

   大部分低频和不知名Native App在应用商店少人问津，无法到达用户手机。数据显示，应用商店下载量最大的前1000个（数量占比不足0.1%）App，占据了总下载次数的一半以上。这说明用户在下载应用时“马太效应”明显。

   在应用使用率上，用户下载之后极少使用，要用时却想不起或找不到它，甚至是六成的Native APP被下载安装后一周内并未被使用，其中又有约1/3在一个月内都未被使用，逐渐成为“僵尸应用”。

3. 微信小程序与Native APP（本地应用）、Web App（网页应用）的区别：

   对比项	小程序	Native APP	Web App
   下载	无需下载，通过扫码等方式获取	从iOS和Android应用商店中下载	无需下载通过浏览器进入
   安装	无需安装	安装在手机中占用存储空间	无需安装
   升级	无需升级	需要升级操作	无需升级
   开发成本	开发周期短	开发周期长	开发周期适中
   开发周期	开发成本低	开发成本高	开发成本适中

---

1.2 微信程序的优势

1.微信有庞大的用户量，用户粘性很高，基于微信开发产品更容易触达用户。

[用户粘性]  用户使用互联网产品产生的持续使用意愿。粘性是用户由于承诺再使用产品，无论外部环境如何变化或营销如何努力，用户仍然坚持重复访问和使用同一产品，粘性可以看作是与持续使用类同的一种行为。

2.微信小程序推广成本低。因为小程序无需安装，用户扫一扫或搜一下即可打开的特点，使其市场接受度很高，用户愿意使用小程序，使得小程序的推广阻力大大的减弱，加上小程序有着微信这个大靠山，传播起来更是得心应手，推广成本不高。而APP本身很多用户就不喜欢，要下载还要安装，成功推广一个要花很大的成本。

3.微信小程序的开发成本低。因为相对而言，无论是网站建设还是APP开发，成本往往都比小程序要高，而且开发适配成本低。具体而言，一是小程序开发只需要一个端口，是基于微信框架搭建的程序，而APP需要开发苹果和安卓两个端口的软件。二是小程序的开发周期短，由于小程序的开发简单，开发周期一般在2-5周，而APP由于双平台的原因，开发周期为3-4个月左右。三是小程序开发相对APP来说，技术要求要简单一点，企业可以把更多的时间和资金投入在运营上。四是APP上架需要向十几个应用商店提交，且各个应用商店所需要的材料和审核标准都不同，所以非常繁杂，而小程序只需要向微信公众平台提交，审核通过即可上线。

4.小程序的运营小程序很低。只需要简单的维护运营即可，操作都比较简单，容易管理。

5.容易小规模试错，然后快速迭代。

6.跨平台。

---

2. 开发环境搭建

2.1 注册账号

网页地址（微信公众平台）：小程序

一个邮箱仅能申请一个小程序。

2.2 APPID

网页地址（微信公众平台|小程序）：

开发 ——> 开发管理 ——> 开发设置 ——> 开发者ID ——> AppID(小程序ID)：*********

2.3 开发工具

1. 微信开发者工具：win7版本只能适合1.05及以下的版本，下载地址 微信开发者工具 1.05.2204250 Stable 更新说明 | 微信开放社区

2. 编译器：如VS Code、Pycharm等。

   [“Visual Studio Code（简称“VS Code”）]  是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。”

3. 数据库：如MySQL、SQLserver等。

4. 数据库可视化工具：如Navicat等。

5. 后端工具：如Vue等。

---

3. 微信开发者工具

3.1 创建项目

第一步，选择目录，新建微信小程序代码存放文件夹（Test1）；

第二步，复制粘贴自己的APPID；

第三步，选择后端服务不使用云开发。

3.2 微信开发者工具界面介绍

详见【微信官方文档】工具：概览 | 微信开放文档

调试器：

1.console：控制台，可以用来打印值。

2.wxml : 页面文件，可定位左侧看到的标签。

【调试器类似于Google Chrome浏览器中的开发者工具】： Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。 Sources：源代码面板，可以查看或编辑源代码，并支持代码调试。 Network：网络面板，记录网络请求信息，根据它可进行网络性能优化。 Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。 Audits：审计面板，用于对小程序进行体验评分。 Sensor：传感器面板，用于模拟地理位置、重力感应。 Storage：存储面板，用于查看和管理本地数据缓存。 Trace：跟踪面板，用于真机调试时跟踪调试信息。 Wxml：Wxml面板，用于查看和调试WXML和WXSS。

3.3 微信开发者工具的快捷键

---

4. 微信小程序文件结构

4.1 微信小程序框架

与传统Web对比：

4.2 基本项目目录

详见【微信官方文档】指南：目录结构 | 微信开放文档

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

pages 页面文件夹

utils 自己封装的工具函数

app.js 微信小程序的入口文件，全局的js（逻辑）文件。定义全局函数和数据，注册小程序。

app.json 全局的配置文件

app.wxss 全局样式文件

project.config.json 对应微信开发者工具的详情。类似node中的 package.json

4.3 配置介绍

一个小程序至少包括全局的app.js和页面的page.js两种配置文件。（配置文件中不能出现注释）

1. 全局配置app.json

app.json 包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

// 配置文件中不能出现注释，这里仅介绍文件结构使用，不能直接复制到小程序里执行。
{
  // 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
  // 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
  // 添加页面可直接在pages下面增加一行【pages/index2/index2,】会自动新建一个index2的文件夹。
  "pages":[
    "pages/index2/index2", // 对应index2文件夹，放在第一个位置，则启动时首先展示这个页面。
    "pages/index/index", 
    "pages/logs/logs"
  ],
  // 用于设置小程序的状态栏、导航条、标题、窗口背景色。
  "window":{
    "backgroundTextStyle":"light",  // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色，如 #000000
    "navigationBarTitleText": "Weixin", //导航栏标题文字内容
    "navigationBarTextStyle":"black" // 导航栏标题颜色，仅支持 black / white
  },
  //底部按钮
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/tabar/index0.jpg", // 未选择时的图标 
        "selectedIconPath": "image/tabar/index1 (1).jpg" // 选择时的团标
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "image/tabar/rizhi0.jpg",
        "selectedIconPath": "image/tabar/rizhi1.jpg"
      },
      {
        "pagePath": "pages/index2/index2",
        "text": "西瓜",
        "iconPath": "image/tabar/index20.jpg",
        "selectedIconPath": "image/tabar/index21.jpg"
      }
    ]
  },
  "style": "v2", 
  "sitemapLocation": "sitemap.json"
}

2. 页面配置page.json

在pages/index1/index1.json文件中：

{
  "navigationBarBackgroundColor": "#ffcccc",
  "navigationBarTitleText": "干饭人",
  "navigationBarTextStyle": "white"
}

4.4 数据绑定

//在pages/index1/index1.js文件中：
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello", // 定义了一个叫msg的变量，冒号后要有一个空格
    mun: 99,
    isboy: false,
    person:{
      name:"小明",
      bumen:"搬砖部"
    },
    title:"你想吃啥？"
  },

//在pages/index1/index1.js文件中：
<!-- pages/index1/index1.wxml -->
<view>
    你是来自哪里的干饭人？
​
    //调用.js文件中的data数据
    <view>msg:{{msg}}</view>
    <view>mun:{{mun}}</view>
    <view>isboy:{{isboy}}</view>
    <view>person.name:{{person.name}}</view>
    <view>person.bumen:{{person.bumen}}</view>
​
    //组件属性
    <view data-id="{{title}}">title</view>
​
    //选中框的布尔属性要加大括号
    <view>
        <checkbox checked="{{false}}"></checkbox>
    </view>
</view>