【微信小程序】01- 初识小程序

【微信小程序】01- 初识小程序

一：微信小程序概述

所谓微信小程序就是在微信app内部的轻量级应用

无需安装 -> 只要有微信，然后再微信中下拉搜一搜或者扫一扫直接使用

后端 - 服务端 - 提供接口

• python的django / flask / fastapi
• java的ssm, spring boot
• go的gin，biggo

前端 - 浏览器端 - 页面展示

• 浏览器中访问的界面(web界面) - 传统的前端指的就是这个 -> html, css, js
• 大前端(专一，快但是要开发多次)
  • 安卓端(Android)和IOS端的app -> 安卓使用的是java和kotlin，IOS使用的是Object C
  • 桌面端的开发 -> 使用QT平台进行开发
  • 微信小程序 -> 使用的是html, css, js的变种 -> wxml, wxss, js
• 为了解决大前端技术不统一的情况，出现了两种框架（统一但是编译慢）
  • uni-app -> 国人推出的 -> 使用的是html, css, js和vue框架 -> 在uni-app平台进行开发 -> 然后打包到安卓，iso，微信小程序和web端 -> 写一套编码可以编译到多个平台
  • flutter -> 谷歌推出的 -> 一处编译，处处运行

二：注册微信小程序账号

1️⃣ 访问微信公众平台，注册一个微信小程序账号

注意事项：如果被绑定了，需要解绑或者使用其他的邮箱

• 要未被微信公众平台注册过的邮箱
• 要未被微信开放平台注册过的邮箱
• 要未被个人微信号绑定过的邮箱

2️⃣ 扫码登录 -> 选择小程序 -> 然后前往注册 -> 填入自己的信息

3️⃣ 然后他会给你发一个激活邮件，点开邮件会让你填写一些实名信息（需要填写身份证号啥的）

4️⃣ 注册成功之后，返回微信公众平台，然后要对小程序账号进行一些设置

• 小程序账号的信息（必须），因为小程序后续需要提审核和上线
• 名称，图标和类目等等
• 小程序的备案和微信的认证

三：微信小程序的开发流程

微信小程序 -> 本地开发 -> 上线到线上环境

本地开发：微信开发者工具 & 后端接口

线上环境

• 体验版：只能选择几个人用 -> 公网ip,把django顶目部署在公网上

• 正式发布：备案，所有人都可以用 -> 公网ip,把django项目部署在公网上

项目成员配置

四：创建微信小程序项目

1️⃣ 获取小程序的ID（必须是加入到开发者之后才行）

• 位置：小程序后台 -> 开发 -> 开发管理 -> 开发者ID -> AppId

2️⃣ 下载微信开发者工具 - 必须联网才能使用这个工具，不能离线

• 下载位置：小程序后台 -> 开发 -> 开发工具
• 或者直接使用地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3️⃣ 下载好之后，双击打开，然后微信扫码进入，会是这个样子的

4️⃣ 点击+号，创建项目 -> 重点就是这个AppID

• 如果你是项目的管理者（创建者）将可以通过下拉直接选择AppId, 如果只是开发者，需要手动输入AppId
• 不要使用云开发（如果使用云开发将会花钱，不用自己写后端）
• 不用选择模板（除了JS基础模板或者TS基础模板，剩下的对新手不太友好，看自己能力，这里选择不使用模板）

5️⃣ 界面介绍和文件结构介绍

• 如果要调节字体 -> 在菜单栏中的设置 -> 外观设置 -> 编辑器中
• 如果要调整布局 -> 在菜单栏中的界面 -> 外观中，可以将模拟器放在右边之类的，看个人喜好

下面是重点，文件结构

项目的主配置文件，在根目录下，控制整个项目的

• app.js -> 小程序的入口文件，小程序启动的时候，会执行这个JS
• app.json -> 小程序的全局配置，顶部的颜色，标题等等
• app.wxss -> 小程序的全局样式在这里配置（wxss -> css)，全局生效样式
• 注意，app.js和app.json是必须要有的，app.wxss可以没有

页面文件 - pages文件夹

• pages文件夹下面有一个个的文件夹，每一个文件夹中有四个文件
  • xxx.js -> 当前页面的业务逻辑
  • xxx.json -> 当前页面的配置信息
  • xxx.wxml -> 当前页面的模板结构，页面结构和布局，和html差不多，但是标签有些写法不一样
  • xxx.wxss -> 当前页面的样式，类比于css，如果全局像是也有这个样式，以当前页面的样式为准
• xxx.js和xxx.wxml必须要有(必须有基本的结构和逻辑)，另外两个可以没有（可以不美观和使用默认配置）

其他的没有那么重要，主要看下面就可以了

五：配置文件的介绍

1：全局配置文件app.json

小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题，顶部颜色，是否有下拉刷新。。

在文档中可以查看全部的全局配置项目

看看默认情况下，app.json都配置了什么

主要就是pages和window需要关注！！！

{
    "pages": [
        "pages/index/index" // 默认首页是那个？
    ],
    "window": { // 全局默认的窗口表现，顶部的颜色啦，是否有下拉啦
        "navigationBarTextStyle": "black", // 导航栏标题、状态栏颜色，仅支持 black / white
        "navigationStyle": "custom", // 导航栏样式，自定义导航栏
        "navigationBarTitleText": "功能演示", // 导航栏文本
        "navigationBarBackgroundColor": "#0000ff", // 导航栏背景色
        "enablePullDownRefresh": true,  // 是否能够下拉刷新
        "backgroundColor": "#00ffff", // 下拉刷新的时候呈现的背景色
        "backgroundTextStyle": "dark" // 下拉刷新的...是黑色的还是白色的
    },
    "style": "v2",
    "renderer": "skyline",
    "rendererOptions": { // 小程序渲染后端的相关配置选项
        "skyline": {
            "defaultDisplayBlock": true, // 开启默认 Block 布局
            "defaultContentBox": true, // 开启默认 ContentBox 盒模型
            "tagNameStyleIsolation": "legacy", // 开启 tag 选择器全局匹配
            "disableABTest": true, // 开启 Skyline AB 实验
            "sdkVersionBegin": "3.0.0",
            "sdkVersionEnd": "15.255.255"
        }
    },
    "componentFramework": "glass-easel",
    "sitemapLocation": "sitemap.json", // 指明 sitemap.json 的位置
    "lazyCodeLoading": "requiredComponents"
}

2：页面配置文件xxx.json

小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等

app.json中的部分配置，也支持对单个页面进行配置，可以在页面对应的xxx.json文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖app.json中相同的配置项

对于页面配置文档，常用的有下面这三个配置：

• navigationBarBackgroundColor # 导航栏背景颜色，如#000000
• navigationBarTextstyle # 导航栏标题、状态栏颜色，仅支持black/white
• navigationBarTitleText # 导航栏标题文字内容

3：工程配置project.config.json

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

参考文档在这里

{
    "setting": {  // 项目编译和开发工具的配置项
        "es6": true,  // 启用 ES6 转 ES5 的转换（兼容旧版JS）
        "postcss": true,  // 启用 PostCSS 处理 CSS（如自动补全前缀）
        "minified": true,  // 启用代码压缩（减小体积）
        "uglifyFileName": false,  // 是否压缩文件名（通常关闭，避免调试困难）
        "enhance": true,  // 是否启用增强编译（提高兼容性）
        "packNpmRelationList": [],  // 配置 npm 依赖的构建关系（通常为空，自动处理）
        "babelSetting": {  // Babel 编译器的额外配置
            "ignore": [],  // 忽略哪些文件不经过 Babel 转换
            "disablePlugins": [],  // 禁用指定的 Babel 插件
            "outputPath": ""  // 自定义 Babel 输出路径（一般不填）
        },
        "useCompilerPlugins": false,  // 是否使用编译器插件（如 TypeScript）
        "minifyWXML": true  // 是否压缩 WXML 文件（减小体积）
    },
    "compileType": "miniprogram",  // 项目类型，默认是 miniprogram（小程序）
    "simulatorPluginLibVersion": {},  // 模拟器插件版本信息（通常为空）
    "packOptions": {  // 项目打包配置
        "ignore": [],  // 打包时忽略的文件/目录
        "include": []  // 强制包含的文件/目录（即使被 ignore 规则排除）
    },
    "appid": "wxc330d0aac4c0ddaf",  // 小程序的 AppID（在微信后台获取）
    "editorSetting": {}  // 编辑器个性化配置（如字体、主题等）
}

可以配合编辑器的勾选联动修改

4：搜一搜配置sitemap.json

用于配置 小程序的页面索引规则，决定哪些页面可以被微信爬虫抓取并展示在搜索结果中。

如果不配置此文件，默认所有页面 不允许被收录。

{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 
    // 描述信息，指向官方文档说明
    "rules": [{  // 索引规则列表（可配置多条规则）
        "action": "allow",  // 规则动作：allow（允许收录）/disallow（拒绝收录）
        "page": "*"  // 匹配的页面路径，* 表示所有页面
    }]
}

六：webview和skyline

在调试器中，可以发现如下警告

• webview -> 老一点，稳定，支持老版本和新版本
• skyline -> 新一点，不太稳定，不支持老版本

调成webview模式，更稳定一些项目配置 ->

修改app,json，将skyline的配置去掉，同时修改"renderer": "webview"，就看不到警告提示了

{
    ...,
    "renderer": "webview",
    "rendererOptions": {
	},
	...,
}

七：新建页面和首页调整

1：方式一：新建文件夹的方式

1️⃣ pages文件夹上右键新建文件夹，例如这里叫login

2️⃣ 在这个新建的文件login中，右键新建page，然后取名（最好和这个新建的文件夹同名）login

3️⃣ 此时就会发现多出来四个页面文件，就是上面介绍的xxx.js xxx.json xxx.wxml xxx.wxss

2：方式二：修改app.json

1️⃣ 在app.json中的pages配置中新增一行，会自动创建文件夹和页面 -> pages/文件夹名称/页面名称

3：启动页面的调整

方式一：在app.json中，谁在最前面默认的首页就是那个！！

方式二：在app.json中，设置"entryPagePath": "首页路径"

八：调试小程序

1：调试小程序基础库

注意基础库是不断更新的，如果你调用指定基础库（例如转发）的时候发现没有效果，可以检查一下当前使用的基础库版本是否支持你所要求的功能。

对于版本问题，参见官方文档：指南 -> 基础库 -> 版本分布

2：调试窗口

• wxml -> 页面布局
• console -> 调试，我们自己打印的，小程序打印的
• network -> 网络请求相关的
• appdata -> 当前页面定义的变量
• storage -> 本地存储

3：真机调试

真机调试的好处就是可以在页面上看见控制台

点击真机调试，会弹出二维码

根据测试的机型扫描二维码之后，手机上就能看到，同时弹出调试台