豫ICP备17040950号-1

微信小程序开发经验之谈

文章目录
  1. 1. 小程序目录结构:
  2. 2. 下载GIT示例:
  3. 3. 导入示例工程:
  4. 4. 小程序NPM构建:
  5. 5. 编译预览小程序:
  6. 6. 常见问题解决:

搞编程多年,闲暇之余研究下微信小程序开发玩玩。
微信小程序官网访问地址: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

导入示例工程:

导入小程序工程到小程序开发工具:

打开微信开发者工具,二维码扫描登录自己的微信小程序账号,如下图:

1_1.png

选择小程序开发

1_2.png

选择导入,输入示例工程路径和输入自己微信小程序账号的appid

13.png

点击导入即可,打开工程进入工具的代码开发区域

小程序NPM构建:

程序构建前本地设置,如下图:

7.png

点击《工具-构建npm》,如下图:

2.png

有可能构建会报如下图错误:

3.png

npm构建未找到npm包入口文件,如何解决?

1、先把 package-lock.json,package.json,node_modules,miniprogram_npm都删干净。
2、打开终端,执行 npm init -y,全程回车,不输入任何配置信息
3、执行 npm i @vant/weapp -S --production

然后重新再次执行,第一步操作npm构建即可。

4.png

5.png

编译预览小程序:

点击编译和预览,可选择在手机或PC电脑查看运行效果

6.png

常见问题解决:

1、发布后线上小程序接口,总提示fail url not in domain list

因为小程序缓存原因造成的,长按小程序图标,拖动删除。删缓存就解决问题了。如下图:

8.png