minprogram 记

目录

一、开发小程序注意事项

二、响应式开发

三、tabBar 配置

四、使用第三方组件库

五、小程序中编译页面

六、使用 less 开发微信小程序

1、vscode 中，如何配置使用 less?

2、微信开发者工具中，如何配置使用 less?

---

一、开发小程序注意事项

• 开发环境下建议关闭对“域名、TLS 版本以及 HTTPS 证书的校验”，但是上线时一定记得打开此校验，后端提供的接口必须配置 https 的小程序才能调用。
• 小程序页面下的四个文件的文件名最好与该页面名保持一致。

 

二、响应式开发

1、元素随机型响应——使用 rpx 单位即可，推荐此写法。

2、若使用的是 px，如何实现响应式呢？

转换尺寸即可，遵循的转换规则如下：

iphone 6 机型下：

设计图上的尺寸 ÷ 2

若设计师没有按 iPhone 6 出图，而是按照别的机型出的设计图，那就不能除以 2 了。换算关系随机型而变。

 

三、tabBar 配置

小程序头部和底部 tabBar 已经支持了自定义，可以用小程序自带的配置实现，也可以自定义实现。

自定义 tabBar

 

四、使用第三方组件库

例如：lin-ui

使用npm安装 （推荐）

首先，初始化 npm 的环境：

在项目根目录下执行：npm init -y

有过前端开发经验的小伙伴都知道，一般来说，这样就初始化好了npm的环境，但是，小程序比较特殊，它还需要一步操作才可以：

找到菜单栏的“工具”里的“构建npm”，点它，会发现项目里多了“miniprogram_npm”目录，至此就初始化好小程序的 npm 了。

 

五、小程序中编译页面

三种方法：

第一种方法是：在pages里将要渲染的页面移到最上面：

比如：要渲染 welcome 页面

第二种方法是：添加配置entryPagePath属性：

比如：要渲染article页面

第三种方法是：添加编译模式

在编辑器，点击“编译”按钮旁边的下拉菜单：

点击里面的“+添加编译模式”，选择要启动页面：

好了。

编译模式可以无限添加，巴适～。

 

六、使用 less 开发微信小程序

1、vscode 中，如何配置使用 less?

在 vscode 中按 Ctrl+Shift+X 键，打开扩展，然后搜索 easy-less 并安装。

然后，在 vscode 中，找到设置>首选项

搜索 easy-less 

点击“在 settings.json 中编辑”

输入：

"less.compile": {
    "outExt": ".wxss"
}

2、微信开发者工具中，如何配置使用 less?

1⃣️、通过vscode 下载获取 less 插件包

安装：在 vscode 中按 Ctrl+Shift+X 键，打开扩展，然后搜索 easy-less 并安装。

获取：

window 系统："C:\Users\用户名.vscode\extensions"

mac 系统："~/.vscode/extensions"

拷贝一份 mrcrowl.easy-less 文件。

2⃣️、将 less 插件包配置到微信开发者工具中，并开启该功能

打开微信开发者工具，top 栏，设置>通用设置>扩展>编辑器自定义扩展

点击“打开扩展文件夹”。

将 mrcrowl.easy-less 文件粘贴到这里。

返回微信开发者工具，此时“编辑器自定义扩展”里会自增一个 easy-less 包，开启此功能。

3⃣️、设置输出.wxss

easy-less 默认输出的 .css 类型的文件，但是小程序中要使用 .wxss 的文件，所以要设置一下输出的 .wxss 的文件类型。

微信开发者工具，top 栏，设置>通用设置>编辑器

点击“更多及工作区的编辑器设置…”

搜索 easy-less 

点击“在 settings.json 中编辑”

输入：

"less.compile": {
    "outExt": ".wxss"
}