小程序项目遇到的问题和知识点
1、移动端相关知识
1.1、物理像素
- 屏幕的分辨率。
- 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点。
1.2、设备独立像素 & css像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:css像素,只是在android机中css像素就不叫“css像素”了,而叫“设备独立像素”),然后由相关系统转换为物理像素。
1.3、dpr比 & DPI & PPI
- dpr:设备像素比,物理像素/设备独立像素 = dpr,一般以Iphone6的dpr为准dpr=2。
- PPI:一英寸显示屏上的像素点个数。
- DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰。
1.4、移动端的适配方案
1.4.1、viewport适配
- 视口:
- 布局视口:网页宽度(默认980px)。
- 视觉视口:所见即所得。
- 理想视口。
- viewport适配很简单,用meta标签。
1.4.1.1、为什么做viewport适配
- 手机厂商在生产手机的时候大部分手机默认页面宽度为980px。
- 手机实际视口宽度都要小于980px,如iPhone6为375px。
- 开发需求:需要将980的页面完全显示在手机屏幕上且没有滚动条。
1.4.1.2、实现
<meta name="viewport" content="width=device-width,initail-scale=1.0">
width = device-width;让我们的视觉视口宽度等于布局视口宽度。
- 此时光有viewport还没完
1.4.2、rem适配
1.4.2.1、为什么做rem适配
- 机型太多,不同的机型屏幕大小不一样。
- 需求:一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化。
1.4.2.2、实现
function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
// 将屏幕等分10分
let rem = clientWidth / 10
document.documentElement.style.fontSize = rem + 'px'
document.body.style.fontSize = '12px'
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', ()=> {
timeoutId && clearTimeout(timeoutId),
timeoutId = setTimeout(() => {
remRefresh()
}, 300)
})
2、uniapp相关知识
2.1、uni-app简介
uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
uni-app官方文档: https://uniapp.dcloud.net.cn/
2.2、开发工具
uniapp官方推荐使用HBuilderX来开发uniapp类型的项目。主要好处:
- 模板丰富
- 完善的智能提示
- 一键运行
当然,依然可以根据个人的喜好,选择使用VS Code、Sublime等自己喜欢的编辑器。
2.2.1、下载HBuilderX
- 访问HBuilderX的官网首页:https://www.dcloud.io/hbuilderx.html
- 将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
- 双击HBuilderX.exe即可启动HBuilderX
2.2.2、安装scss/sass等插件
为了方便编写样式(例如:<style lang="scss"></style>
),建议安装scss/sass编译插件。插件地址:https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后,点击右上角的使用HBuilderX导入插件按钮进行自动安装,截图如下:
2.2.3、快捷键方案切换
操作步骤:工具 -> 预设快捷键方案切换 -> VS Code
2.2.4、修改编辑器的基本设置
操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置
2.3、新建 uni-app 项目
-
文件 -> 新建 -> 项目
-
填写项目基本信息
-
项目创建成功
2.4、把项目运行到微信开发者工具
-
填写自己的微信小程序的 AppID:
-
在 HBuilderX 中,配置“微信开发者工具”的安装路径:
-
在微信开发者工具中,通过 设置 -> 安全设置 面板,开启“微信开发者工具”的服务端口:
-
在 HBuilderX 中,点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具 ,将当前 uniapp 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:
2.5、配置
2.5.1、配置 tabBar 效果
修改项目根目录中的 pages.json 配置文件,新增 tabBar 的配置节点如下:
{
"tabBar": {
"selectedColor": "#C00000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}
}
2.5.2、修改导航条的样式效果
- 打开 pages.json 这个全局的配置文件
- 修改 globalStyle 节点如下:
{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "黑马优购",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}
2.5.3、配置网络请求
由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支
持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
官方文档:https://www.npmjs.com/package/@escook/request-miniprogram
最终,在项目的 main.js 入口文件中,通过如下的方式进行配置:
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
2.5.4、配置小程序分包
分包可以减少小程序首次启动时的加载时间。
- 在 pages.json 中,和 pages 节点平级的位置声明 subPackages 节点,用来定义分包相
关的结构:
{
"pages": [
{
"path": "pages/home/home",
"style": {}
},
{
"path": "pages/cate/cate",
"style": {}
},
{
"path": "pages/cart/cart",
"style": {}
},
{
"path": "pages/my/my",
"style": {}
}
],
"subPackages": [
{
"root": "subpkg",
"pages": []
}
]
}
- 在 subpkg 目录上鼠标右键,点击 新建页面 选项,并填写页面的相关信息:
2.6、发布小程序
2.6.1、为什么要发布
- 小程序只有发布后,才能被用户搜索并使用。
- 开发期间的小程序为了便于调试,含有sourcemap相关的文件,并且代码没有压缩,因此体积较大,不适合直接当作线上版本进行发布。
- 通过执行“小程序发布”,能够优化小程序的体积,提高小程序的运行性能。
2.6.2、发布小程序流程
-
点击HBuilderX菜单栏上的发行->小程序-微信(仅适用于uni-app)
-
在弹出框中填写要发布的小程序的名称和AppId之后,点击发行按钮。
-
在HBuilderX的控制台查看小程序发布编译的进度。
-
发布编译完成之后,会自动打开一个新的微信开发者工具界面,此时点击工具栏上的上传按钮
-
填写版本号和项目备注,点击上传按钮,完成后点击确定即可。
-
通过微信开发者工具上传的代码,默认处于版本管理的开发版本列表中,如图所示:
-
将开发版本提交审核->再将审核通过的版本发布上线,即可实现小程序的发布和上线:
2.7、其他(发布为Android App)的流程
- 点击HBuilderX状态栏左侧的未登录按钮登录。
- 打开项目根目录中的manifest.json配置文件,在基础配置面板中,获取uni-app应用标识,并填写应用名称:
- 切换到App图标配置面板,点击浏览按钮,选择合适的图片之后,再点击自动生成所有图标并替换即可:
- 点击菜单栏上的发行->原生App-云打包:
- 勾选打包配置如下:
- 在控制台中查看打包的进度信息:
- 点击链接下载apk的安装包,并安装到Android手机中查看打包的效果。
3、小程序特点概述
- 没有DOM。
- 组件化开发:具备特定功能效果的代码集合。
- 体积小,单个压缩包体积不能大于2M,否则无法上线。
- 小程序的四个重要的文件:
a).js
b).wxml -->view结构 -->html
c).wxss -->view样式 -->css
d).json -->view数据 --> json文件 - 小程序适配方案:rpx(responsive pixel 响应式像素单位)
a)小程序适配单位:rpx。
b)规定任何屏幕下宽度为750rpx。
c)小程序会根据屏幕的宽度不同自动计算rpx值的大小。
d)iPhone6下:1rpx = 1物理像素 = 0.5px。