JZTXT

微信小程序(一)

发布时间 2023-07-04 22:24:06作者: QiaoZhi

其实前期工作，微信小程序文档写的挺详细的，这里自己做个记录，记录踩过的坑。

0. 简介

​ 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

​ 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。

1. 准备工作

1. 申请小程序

https://mp.weixin.qq.com/wxopen/waregister?action=step1

​ 这里需要注意：一个邮箱只能绑定一个微信公众号，而且绑定了公众号之后就不可以绑定小程序了。而且公众号和小程序登录的界面不一样。 登录的时候都是 访问 https://mp.weixin.qq.com/ 进行登录，扫码可以选择自己是登录小程序还是公众号。

2. 小程序设置自己的信息

小程序有两部分信息：

  1. 小程序基本信息：名称、简介、头像等，二维码会自动生成。
  2. 小程序类目 (可以理解为分类，涉及的区域)

3. 下载开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

根据自己的电脑型号选择稳定版本即可。

2. 创建自己的第一个小程序

1. 调试demo

  1. 打开开发者工具, 输入自己的项目名称、在本地磁盘的路径等信息，然后创建
  2. 开发者工具需要登录，点击开发者工具左上角用自己的微信登录
  3. 自己创建的项目修改appId， 开发者工具-》导航栏-》详情-》Appid 修改(这个ID对应自己小程序管理界面-》设置看到的AppID)， 修改后才可以用手机进行预览，否则只能模拟器看效果
  4. 开发者工具解释：

(1). 最头顶的导航栏和一般开发工具一样

(2). 左上角的头像是当前开发者工具的登录用户，需要登录才能进行预览、真机调试等操作

(3). 模拟器、编辑器、调试器： 模拟器是界面左边看到的利用收集模拟出的小程序结果，编辑器是编辑区域用于编辑源码，调试器和浏览器的console 一样用于debug输出一些调试日志。 (变为绿色是展示、灰色是隐藏，这里三个必须保留一个)

(4). 编译： 常规理解，打包项目

(5). 预览： 预览有二维码预览和自动预览，可以理解位将项目编译后上传到服务器。 二维码预览可以支持扫码预览，自动预览是在开发者打开微信的前提下，会自动打开小程序。

(6). 真机调试： 和预览一样有二维码调试和自动调试，比预览更全的真机调试会在开发工具打开当前调试手机的型号、系统、微信版本以及打开调试器等信息

(7). 上传：输入版本、描述信息，会上传到服务器。 管理员可以到管理界面的版本管理选择版本然后发布或者设为体验版。

(8). 版本管理： 是对本项目进行git 管理

(9). 详情： 有appid、项目路径等基本信息，可以进行修改。也可以查看本地设置(设置一些校验、权限)，后期调试接口需要用到。

2. 代码构成

Json: 配置文件

wxml：页面元素，类似于html

wxss：类似于css

js：js用于交互

3. 开发小程序储备知识

1. Flex 布局简介

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。display: 'flex'。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
            position: relative;
        }
        .row, .row_reverse, .column, .column_reverse{
            display: flex;
            margin-bottom: 5px;
        }
        .row {
            flex-direction: row;
        }
        .row_reverse {
            flex-direction: row-reverse;
        }
        .column {
            flex-direction: column;
        }
        .column_reverse {
            flex-direction: column-reverse;
            position: absolute;
            top: 120px;
            left: 400px;
        }
        .row div, .row_reverse div, .column div, .column_reverse div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="row">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="row_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="column">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="column_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </div>
</body>
</html>

结果：

2. 移动端像素相关知识

  1. 物理像素

屏幕的分辨率。纵横向上的像素点数，单位是px。物理像素是独立存在的像素。

设备能控制显示的最小单元，可以把物理像素看成是对应的像素点，像素越高显示的越清晰。

  1. 设备独立像素&css像素&设备尺寸

​ 设备独立像素可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如css像素，大多数情况下css像素和设备独立像素是可以转换的)，然后由相关系统转换为物理像素。

比如：用浏览器模拟器打开

尺寸：可以认为是设备对角线的长度，单位是英寸

设备独立像素：414*896

  1. dpr比 & DPI & PPI

Dpr: 设备像素比，物理像素/设备独立像素=dpr。iphone6 的 dpr 为2

PPI: 一英寸显示屏上的像素点个数

DPI: 最早是指打印机在单位面积上打印的墨点数，墨点越多越清晰。

3. 移动端适配方案

1. Viewport 适配

  1. viewport适配

手机厂商在生产手机的时候大部分手机默认页面宽度为980px，手机的实际视觉宽度都小于980px。所以需要将980px的页面完全显示在手机屏幕上且没有滚动条。

  1. 标签

initial-scale 指定缩放比例，值为0-1

  1. 测试： 打开F12，然后用IPHONE XR 调试器预览

(1). 加viewport

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
    <style>
        #main {
            width: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="main">
        111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧
    </div>
</body>
</html>

<script type="text/javascript">
    // 网页可见区域宽
    alert(document.body.clientWidth)
</script>

结果：

打印 398，同时文字自动折行显示，屏幕没有滚动条

(2). 去掉 viewport

打印964， 文字在一行，且出现滚动条。

2. Rem 适配

REM（Font size of the root element）是指相对于根元素的字体大小的单位。

  1. 适配原因

适配不同机型的屏幕大小，一套设计稿在不同的机型呈现的效果一致。

  1. 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #main {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="main">
        111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大
    </div>
</body>
</html>

<script type="text/javascript">
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)
})
</script>
  1. 查看渲染后的界面代码
<html lang="en" style="font-size: 98px;"><head>
    <style>
        #main {
            background-color: red;
        }
    </style>
</head>
<body style="font-size: 12px;">
    <div id="main">
        111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大111222二姑妈发的那个电脑房间卡巴纳吉扩大放那吧较大放那吧金卡放大归纳科技吧发多少可能风的季节年纪大
    </div>



<script type="text/javascript">
function remRefresh() {
    let clientWidth = document.documentElement.clientWidth;
     // 将屏幕等分 10 份
     let rem = clientWidth / 10;
     document.documentElement.style.fontSize = rem + 'px';
     document.body.style.fontSize = '12px';
     console.log(rem);
}

window.addEventListener('pageshow', () => {
 remRefresh()
})

// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
 timeoutId && clearTimeout(timeoutId);
 timeoutId = setTimeout(() =>{
    remRefresh()
 }, 300)
})
</script></body></html>
  1. 可以看到实际是加了 font-size 标签

4. 相关连接

小程序和公众号微信官网：https://mp.weixin.qq.com/

微信小程序开发文档(微信官方文档)：https://developers.weixin.qq.com/miniprogram/dev/framework/

Flex 布局教程：https://www.runoob.com/w3cnote/flex-grammar.html