搞编程多年,闲暇之余研究下微信小程序开发玩玩。
微信小程序官网访问地址:https://mp.weixin.qq.com ,其中https://weixin.qq.com 好理解,https://qq.com 是腾讯的主域名,weixin是分配给微信团队的二级域名,而微信公众平台作为其中一个产品用的就是三级域名了,但是这个三级域名的名称为什么是mp呢?
mp竟然是Media Platform(媒体平台)的缩写,就是媒体和自媒体的公共平台
阅读本文前需查看下https://developers.weixin.qq.com/miniprogram/dev/framework 微信小程序官方文档,起码得了解基础目录结构和下载官方的小程序开发工具。
本文是以已有的以有赞Vant小程序Npm组件类库为基础示例演示开发经验。
小程序目录结构:
小程序包含一个描述整体程序的 app
和多个描述各自页面的 page
。
(1)、一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必需 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
(2)、一个小程序页面由四个文件组成,分别是:
文件类型 | 必需 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
注意:
为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名
。
下载GIT示例:
1 | git clone https://code.aliyun.com/mrzhangshunli/miniprogram_iot_demo.git |
导入示例工程:
导入小程序工程到小程序开发工具:
打开微信开发者工具,二维码扫描登录自己的微信小程序账号,如下图:
选择小程序开发
选择导入,输入示例工程路径和输入自己微信小程序账号的appid
点击导入即可,打开工程进入工具的代码开发区域
小程序NPM构建:
程序构建前本地设置,如下图:
点击《工具-构建npm》,如下图:
有可能构建会报如下图错误:
npm构建未找到npm包入口文件,如何解决?
1、先把 package-lock.json,package.json,node_modules,miniprogram_npm都删干净。
2、打开终端,执行 npm init -y
,全程回车,不输入任何配置信息
3、执行 npm i @vant/weapp -S --production
然后重新再次执行,第一步操作npm构建即可。
编译预览小程序:
点击编译和预览,可选择在手机或PC电脑查看运行效果
常见问题解决:
1、发布后线上小程序接口,总提示fail url not in domain list
因为小程序缓存原因造成的,长按小程序图标,拖动删除。删缓存就解决问题了。如下图: