小程序项目遇到的问题和知识点

1、移动端相关知识

1.1、物理像素

1. 屏幕的分辨率。
2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点。

1.2、设备独立像素 & css像素

设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（比如：css像素，只是在android机中css像素就不叫“css像素”了，而叫“设备独立像素”），然后由相关系统转换为物理像素。

1.3、dpr比 & DPI & PPI

1. dpr：设备像素比，物理像素/设备独立像素 = dpr，一般以Iphone6的dpr为准dpr=2。
2. PPI：一英寸显示屏上的像素点个数。
3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰。
   
   
   

1.4、移动端的适配方案

1.4.1、viewport适配

• 视口：

1. 布局视口：网页宽度（默认980px）。
2. 视觉视口：所见即所得。
3. 理想视口。

• viewport适配很简单，用meta标签。

1.4.1.1、为什么做viewport适配

1. 手机厂商在生产手机的时候大部分手机默认页面宽度为980px。
2. 手机实际视口宽度都要小于980px，如iPhone6为375px。
3. 开发需求：需要将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. 机型太多，不同的机型屏幕大小不一样。
2. 需求：一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化。

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

1. 访问HBuilderX的官网首页：https://www.dcloud.io/hbuilderx.html
2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
3. 双击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 项目

1. 文件 -> 新建 -> 项目

2. 填写项目基本信息

3. 项目创建成功

2.4、把项目运行到微信开发者工具

1. 填写自己的微信小程序的 AppID：

2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

4. 在 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、修改导航条的样式效果

1. 打开 pages.json 这个全局的配置文件
2. 修改 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、配置小程序分包

分包可以减少小程序首次启动时的加载时间。

1. 在 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": []
    }
  ]
}

2. 在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：
   

2.6、发布小程序

2.6.1、为什么要发布

1. 小程序只有发布后，才能被用户搜索并使用。
2. 开发期间的小程序为了便于调试，含有sourcemap相关的文件，并且代码没有压缩，因此体积较大，不适合直接当作线上版本进行发布。
3. 通过执行“小程序发布”，能够优化小程序的体积，提高小程序的运行性能。

2.6.2、发布小程序流程

1. 点击HBuilderX菜单栏上的发行->小程序-微信（仅适用于uni-app）

2. 在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮。

3. 在HBuilderX的控制台查看小程序发布编译的进度。

4. 发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时点击工具栏上的上传按钮

5. 填写版本号和项目备注，点击上传按钮，完成后点击确定即可。

6. 通过微信开发者工具上传的代码，默认处于版本管理的开发版本列表中，如图所示：

7. 将开发版本提交审核->再将审核通过的版本发布上线，即可实现小程序的发布和上线：

2.7、其他（发布为Android App）的流程

1. 点击HBuilderX状态栏左侧的未登录按钮登录。
2. 打开项目根目录中的manifest.json配置文件，在基础配置面板中，获取uni-app应用标识，并填写应用名称：
3. 切换到App图标配置面板，点击浏览按钮，选择合适的图片之后，再点击自动生成所有图标并替换即可：
4. 点击菜单栏上的发行->原生App-云打包：
5. 勾选打包配置如下：
6. 在控制台中查看打包的进度信息：
7. 点击链接下载apk的安装包，并安装到Android手机中查看打包的效果。

3、小程序特点概述

1. 没有DOM。
2. 组件化开发：具备特定功能效果的代码集合。
3. 体积小，单个压缩包体积不能大于2M，否则无法上线。
4. 小程序的四个重要的文件：
   a）.js
   b）.wxml -->view结构 -->html
   c）.wxss -->view样式 -->css
   d）.json -->view数据 --> json文件
5. 小程序适配方案：rpx（responsive pixel 响应式像素单位）
   a）小程序适配单位：rpx。
   b）规定任何屏幕下宽度为750rpx。
   c）小程序会根据屏幕的宽度不同自动计算rpx值的大小。
   d）iPhone6下：1rpx = 1物理像素 = 0.5px。