微信小程序学习（重点踩坑）

🍙基本

微信小程序基本概念及其优势

优势：
①唯一性。类似我们常说的网站建设域名，小程序的名称具有唯一性，谁先注册谁便拥有。

②自带推广。这一优势也是小程序出现初期很多人所看重的，自带的“附近小程序”功能让在商家能够被五公里范围内的微信用户搜索到，并且商家店铺是根据距离排名，无关品牌大小，这一优势更利于商家广告推广。

③成本低。就像我们在前面说的，小程序上线之初很多人认为其会使APP的替代品，能够实现常见客户端的功能，且相比自行开发APP，微信小程序的成本要低得多。对于一些零售商家，如入驻其它o2o平台不单要交入驻费用，销售还会被平台抽走利润，通过小程序则不会……

🍟流程

微信小程序从零到上线的基本流程

基本流程

• 小程序账号注册开通
• 完善小程序信息
• 开发小程序
• 提交小程序审核及发布

详细步骤

① 微信小程序账号注册开通
注册开通小程序账号很简单，在微信公众平台即可开通https://mp.weixin.qq.com，参考：微信小程序注册入口

小程序账号注册很简单，填写邮箱、密码，然后去邮箱激活小程序账号即可。注意：很多同学在注册小程序时，提示邮箱被占用，明明是第一次注册小程序，为什么提示邮箱被占用？如下图：

这是因为微信小程序的邮箱和微信公众平台、个人微信号及微信开发平台的注册邮箱是互斥的，但凡你的邮箱注册或绑定过这几个渠道，都是不可以的，建议更换邮箱注册。

② 小程序信息完善
按照步骤自己填写信息，不多赘述啦！

③ 小程序开发
开发小程序可以选择自己开发，也可以选择服务商开发，如果是选择服务商开发这个步骤就不用管了。如果是自己开发小程序，需要为小程序添加开发者，在微信小程序后台的成员管理中添加，如下图：

如上图，点“编辑”，可以看到“添加成员”选项，然后输入微信号即可添加开发者，项目成员可以设置不同权限。关于成员管理，可以参考官方文档：小程序成员管理

完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。

关于微信小程序开发者工具，微信公众平台根据不同操作系统如Windows 64、Windows 32、macOS、macOS(ARM64)提供多版本微信开发者工具：微信开发者工具下载

选择稳定版进行下载😅

进入开发者工具，就可以创建你的小程序项目啦~😏
在微信公众平台上，点击自己的项目头像，可以进入项目基本资料，滑到最下面可以看见账号信息，里面包含着AppID

拿着你的 AppID 就可以创建你的小程序项目啦！

④ 小程序提交审核和发布

小程序开发完毕，可以通过微信开发者工具右上角的“上传”功能，将小程序上传到微信公众平台，如下图：

完成上传后，需要登录到微信公众平台，在左侧“管理”–“版本管理”中，找到使用微信开发者工具上传的小程序版本，提交审核。提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

🍭开发

微信小程序的开发

小程序组件的开发以及使用

小程序插件的安装（平台配置）

小程序里面如何使用npm （构建失败问题怎么解决？）

按照官方文档流程进行npm安装以及构建

• 首先要确保安装了 npm 以及 node 环境
  (可以通过版本号进行检查是否安装成功，例如： npm -v)
• 进行npm初始化 ，执行命令 npm init -y

npm init -y

参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。

• 下载一个依赖（以moment为例），执行命令npm install moment

npm install moment

下载moment依赖。

• 点击 微信开发者工具上方→工具→构建npm
  -构建成功 ？ 恭喜恭喜！！！可以使用你的npm，去安装依赖啦~
  🐦
  🐦
  🐦
  构建失败？？？？？别急 ，尝试以下操作。(亲测有用) 💡
  找到根目录下的 project.config.json 文件
  找到 packNpmManually 和 packNpmRelationList 两个属性，进行如下修改… … 然后再尝试重新构建~
  

    "packNpmManually": true,
    "packNpmRelationList": [
        {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./miniprogram/"
        }
    ],
  

使用公共的Data

存放：app.js 的 globalData 中
取用：xxx : getApp().globalData. xxx

小程序的云开发

疑问 🧐

• 个人小程序如何进行外部链接跳转？？
• wxss怎么使用本地图片当背景？
  – 使用base64

🍤框架

微信小程序开发框架

👀实践

开发一款小程序（待定）

• 小程序的选题（要满足官方允许的范围，自行查文档）
• 小程序所选用的技术栈（是否选用框架）
• 是否使用自带的云开发
• 进行开发（…）