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

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

文章目录

• 【微信小程序】01- 初识小程序
• • 一：微信小程序概述
  • 二：注册微信小程序账号
  • 三：微信小程序的开发流程
  • 四：创建微信小程序项目
  • 五：配置文件的介绍
  • • 1：全局配置文件app.json
    • 2：页面配置文件xxx.json
    • 3：工程配置project.config.json
    • 4：搜一搜配置sitemap.json
  • 六：webview和skyline
  • 七：新建页面和首页调整
  • • 1：方式一：新建文件夹的方式
    • 2：方式二：修改app.json
    • 3：启动页面的调整
  • 八：调试小程序
  • • 1：调试小程序基础库
    • 2：调试窗口
    • 3：真机调试

一：微信小程序概述

所谓微信小程序就是在微信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

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