微信小程序开发（超详细保姆式教程之基本须知）

立如芝兰玉树，笑如朗月入怀。——佚名

---

个人主页  @充电区

点击查看所属专栏 《微信小程序》

【关注+收藏专栏】知识追番，不遗漏 ！！！

---

【没有废话，全是干货！】

---

一、为什么要做小程序

1. 用户便捷性：小程序无需下载，用户能够迅速访问内容，提高了用户留存率和使用频率。
2. 多平台覆盖：小程序能够同时覆盖多个平台，扩大了潜在客户群体，有助于业务增长。
3. 低成本高效益：小程序相对于传统应用来说成本较低，且能够实现类似功能。这让企业可以更快地回本并获得更高的ROI。
4. 社交传播：小程序的社交互动功能使得用户更容易分享和推荐，有助于品牌口碑的传播。
5. 实时更新：企业可以根据市场反馈和需求迅速调整小程序，适应变化的市场环境。

二、准备与基础

API应用程序接口Application Programming Interface

微信小程序是一种运行在微信内部的轻量级的应用程序

小程序特性：无需安装，用完即走，无需卸载，触手可及

小程序开发：访问微信公众平台（https://mp.weixin.qq.com）注册微信小程序账号

申请账号前先准备一个邮箱：

【要求】

1、未被微信公众平台注册

2、未被微信开放平台注册

3、未被个人微信号绑定过（如有可解绑）

获取appID（位置：开发管理-开发设置-开发者ID）

【微信公众平台】

微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

【完善小程序账号信息】

项目成员（参与开发，运营，数据分析）和体验成员

开发者ID=APPID+AppSecret

AppID:在微信账号体系内唯一的身份凭证

AppSecret:开发者对小程序拥有所有权的凭证

【微信开发者工具下载】

稳定版：稳定性高，开发中推荐

预发布版：稳定性尚可，一般包含新的，大的特性，通过了内部测试

开发版：稳定性差，主要用于尽快修复缺陷，敏捷上线小

注意事项：微信开发工具必须联网使用！

三、创建小程序项目

在模拟器上查看项目效果

点击编译——看左边页面or预览——放大左边页面看

四、主界面的5个组成部分

五、文件和目录结构的介绍

一个完整的小程序项目分为两个部分：

主体文件（全局文件），作用于整个小程序中，影响小程序的每个页面，主体文件必须放在项目的根目录下

1. app.js
2. app.json
3. app.wxss

注意：主体文件的名字必须是app，且app.js和app.json是必须的

页面文件（存放在pages目录下，一个页面一个文件夹）

每个页面所需的文件

每个页面通常由四个文件组成【每个文件只对当前页面有效】

.js页面逻辑

.wxml页面结构

.wxss页面样式

.json小页面配置

注意：.js和.wxml文件是必须的

更改渲染模式：skyline改为webview渲染模式

将以下选中代码删掉

六、调试器里的面板

Wxml panel

用于帮助开发者开发wxml转化后的界面。在这里可以看到真实的页面结构以及对应的wxss属性，同时可以通过修改对应的wxss属性，在模拟器中实时看到修改情况（仅为实时预览，无法保存到文件）

Console

1. 开发者在此输入和调试代码
2. 小程序的错误输出，会显示在此处
3. 在控制台中可以输入以下命令

build编译小程序

preview预览

upload上传代码

openVendor打开基础库所在目录

openToolsLog打开工具日志目录

checkProxy(url)检查指定url的代理使用情况

系统打印信息

Network

用于观察和显示发送请求（request）和调用文件（socket）的信息和具体情况

Appdata

用于显示当前项目运行时小程序的appdata具体数据，实时反应项目数据情况，可以在此处编辑数据，并及时反馈到界面上

Storage6

数据存储情况，可以直接在storage面板上进行修改、删除、新增

七、工具栏

编译：模拟器刷新

预览：“弹出”二维码，扫描，点击胶囊里三个点，点击底部弹出的开发调试选项，重启，重新扫描二维码

真机调试：与预览的区别，会弹出一个调试器

清缓存

（如果清除后某些错误还存在，点击左上项目，点击重新打开此项目）

 每天学一点，知识不遗漏！

---

如有错误，还望大佬海涵，不吝指正【抱拳】