微信小程序入门了解

微信小程序快速开发

1. 小程序简介

小程序就是一种全新的连接用户与服务的方式，小程序在微信内可以被快速的获取，分享，传播，最终要的是用户体验比较好。

2. 小程序的发展历程

2.1 发展历程

• 微信给腾讯内部的一些业务提供的API，被外部开发者发现之后，慢慢的，就变成了微信中网页的一个标准。2015年微信就发布了一整套开发工具包JS-SDK，开放了很多功能，JS-SDK虽然解决了移动网页能力不足的问题，但是移动网页体验不良的问题依然没有解决，用户在访问网页的时候，浏览器打开网页之前，都会存在一个白屏的过程，移动设备上面尤其比较明显，微信团队通过 “微信 Web 资源离线存储”技术解决了这个问题。但是不能加载大量的CSS和JS文件。如何开发一个系统来解决这些问题，小程序由此就诞生了。

• 微信实际上是一个混合类型App(Hyprid Application)，客户端里面嵌套了WebView(网页视图)，实际上就是将一个网页嵌套在App中显示出来。

2.2 App的分类

• 原生APP(Native App)
• 混合App(Hyprid App) 【实际上就是在原生App里面嵌套Web 网页的形式，这种技术就是WebView】
• Web App(网页应用程序)

3. 小程序 & 普通网页 的区别

• 面对对象不同
  • 小程序：面对的是基于Android和IOS两种操作系统的客户端。
  • 网页开发：面对的是各种各样的浏览器：chrome、Firefox、IE、Edge等
• DOM、BOM操作
  • 小程序：不能进行DOM、BOM操作，因为小程序中逻辑层和渲染层是分离的，是两个线程
  • 网页开发：可以利用浏览器暴漏的各种DOM API，进行DOM的操作；网页开发中渲染线程和脚本线程是互斥的
• 运行环境
  • 小程序：小程序的逻辑层运行在JSCore中
  • 网页开发：网页开发基于NodeJS运行环境，JSCore运行环境和NodeJS环境也不完全相同，故一些NPM包不能在JSCore中使用

小程序运行环境：

4.小程序的特点

• 无需下载、安装
• 即搜即用
• 快速加载
• 原生体验

5. 快速开发

参考微信官方开始地址

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

6. 小程序目录结构

PS D:\code\WecharProject\rd-notes> tree /F
卷 YLD 的文件夹 PATH 列表
卷序列号为 5C12-D5D8
D:.
│  .eslintrc.js                          // 代码检查工具配置文件
│  project.config.json                   // 项目个性化配置文件
│  project.private.config.json           // 项目的私有个性化配置文件，优先级 > 项目个性化配置文件
│  README.md
│  uploadCloudFunction.bat               // 云开发脚本
│
└─miniprogram
    │  app.js                            // 全局JS文件
    │  app.json                          // 全局配置文件
    │  app.wxss                          // 全局样式
    │  envList.js
    │  sitemap.json                      // 微信索引配置文件
    │
    ├─components                         // 公共组件信息
    │  └─cloudTipModal
    │          index.js
    │          index.json
    │          index.wxml
    │          index.wxss
    │
    ├─images                              // 公共图片
    │      arrow.svg
    │      database.png
    │      deploy_step1.png
    │      deploy_step2.png
    │
    └─pages                                // 小程序页面
        ├─createCollection                 
        │      index.js                    // 页面逻辑                 
        │      index.json                  // 页面配置
        │      index.wxml                  // 页面结构
        │      index.wxss                  // 页面样式表
        │
        └─uploadFile
                index.js
                index.json
                index.wxml
                index.wxss

PS D:\code\WecharProject\rd-notes>

---

目录文件介绍

• app.json（全局配置文件）

  app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

• project.config.json(工具个性化配置文件)

  针对开发工具的个性化配置文件，当更换电脑或者重新安装开发工具时，保持之前的个性化配置。

• page.json(页面配置文件)

  表示和小程序页面相关的配置内容，可以覆盖掉app.json文件中配置的公共页面的一些属性。

• sitemap.json

  表示小程序页面是否允许被微信索引，没有该文件时，表示所有页面都能被索引

---

app.json 文件中属性说明：

{
  "pages": [
    "pages/index/index",
    "pages/getOpenId/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

• pages: 用于描述小程序的所有页面路径，目的是为了让微信客户端知道页面在哪个目录，pages中默认第一个路径为小程序的首页路径。
• windows:定义小程序页面的公共属性配置，比如顶部背景颜色、字体颜色等。

7.页面加载流程&交互流程

7.1 微信客户端加载小程序页面流程图

7.2 交互流程

• 小程序中渲染层和逻辑层交互是通过Native(微信客户端)做中转
• 逻辑层与后端服务通过Native(微信客户端)做中转