小程序 --- 环境搭建和开发者工具使用

1. 概述

1.1 微信小程序是什么

微信小程序是一种运行在微信内部的轻量级应用程序,在使用小程序时,不需要下载安装,用户 扫一扫 或 搜一下 即可打开应用。它也体现了 用完即走 的理念,用户不用关心安装太多应用的问题。应用随时可用,但又无需安装、卸载

2. 环境搭建

2.1 注册小程序

https://mp.weixin.qq.com/

1. 使用新的邮箱,点击立即注册

2. 选择小程序

3. 填写邮箱和密码等信息

2.2 完善小程序的基本信息

2.3 成员添加

**项目成员: ** 参与小程序开发、运营的成员,包括运营者、开发者及数据分析者,项目成员可登录微信公众后台,管理员可以在成员管理中添加、删除项目成员,设置项目成员的角色

**体验成员: ** 参与小程序内测体验的成员,可使用体验版小程序,但不属于项目成员,管理员可以在成员管理中添加、删除项目成员,设置项目成员的角色

2.4 开发者 ID

一个完整的开发者ID 是由 小程序ID(AppID) 和 小程序秘钥(AppSecret) 组成,

**小程序ID(AppID) : **是小程序在整个微信账号体系内的唯一身份凭证,后续在很多地方都会用到

**小程序秘钥(AppSecret) : **是开发者对小程序拥有所有权的凭证,在进行微信登录、微信支付,或发送消息等高级开发时会使用到

2.5 微信开发者工具

1. 下载

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

2. 创建项目

3. 目录结构

3.1 app.js

小程序的入口文件

3.2 app.json

小程序的全局配置文件,用于配置小程序的全局属性和页面路由

3.3 app.wxss

小程序的全局样式文件

3.4 pages

每个页面所需的文件,一个页面是一个文件夹

1. index

每个文件只对当前页面生效

index/index.js

存放当前页面逻辑

index/index.json

存放当前页面的配置信息,用于配置当前页面的窗口样式、页面标题等

index/index.wxml

存放当前页面的标签结构

index.wxss

存放当前页面的页面样式

3.5 project.config.json

小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置

3.6 project.private.config.json

3.7 sitemap.json

配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率

4. 渲染模式

4.1 Skyline

2.29.2 版本及以上基础库支持,目前不成熟

4.2 WebView (常用)

切换为 WebView 渲染模式,需要修改 app.json 中的配置信息

app.json

{
    # 删除或注释以下三个配置项即可切换为 WebView 渲染模式
    # "render": "skyline",
    # "rendererOptions": {},
    # "componentFramework": "glass-easel"
}

5. 新建页面

5.1 手动新建

1. 在 pages 文件夹下创建 home 文件夹

2. 在 home 文件夹下新建 Page,只需输入 home,则会自动新建四个基础文件

5.2 自动新建

修改配置文件 app.json 中的 pages 配置项保存后,会自动新建页面文件

{
    "pages": [
        "pages/home/home"   // 新添加的页面
    ]
}

6. 调试基础库

微信基础库是指小程序的运行环境, 给小程序提供了运行时所需的 各种API和工具,以及基础框架和运行逻辑等,每个小程序有自己所允许使用的基础库最低版本要求,开发者需要选择要兼容的基础库版本,从而确保小程序的功能正常运行

点击右上角 详情 => 本地设置

7. 调试小程序

1. 点击左上角的调试器,底部会弹出终端调试器

2. console 中可以隐藏系统默认打印的输出信息

3. 可以预览进行开发调试

4. 点击真机调试后,会弹出一个终端,在终端的调试的结果会真实反映到手机页面中

4. 微信开发存在缓存严重的问题,有可能修改后的代码无法实时变化,可以选择清除缓存,或者重新打开此项目