微信小程序(一)

精选原创

wx58f0846670609 2023-07-10 00:14:39 博主文章分类：微信公众号&微信小程序 ©著作权

文章标签 html css 开发者工具 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者wx58f0846670609的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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. 小程序设置自己的信息

小程序有两部分信息：

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

3. 下载开发工具

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

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

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

1. 调试demo

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

微信小程序(一)_html

(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>

结果：

微信小程序(一)_css_02

属性介绍：

六个属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 决定主轴的方向(即项目的排列方向), 四个值
row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。
flex-wrap 项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
nowrap（默认）：不换行（列）。
wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。
flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 定义主轴上的对齐方式
flex-start（默认）：与主轴的起点对齐。
flex-end：与主轴的终点对齐。
center：与主轴的中点对齐。
space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。
align-content属性多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：主轴线占满整个交叉轴。
Order 指定顺序，值越小越靠前

简单测试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
</head>

<style type="text/css">
    .container{
        width: 100%;
        background: red;
        display: flex;
        flex-direction: row;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div>111</div>
    <div>222</div>
</div>

</body>
</html>

(1). flex-direction: 主轴方向

row;

微信小程序(一)_开发者工具_03

column-reverse;

微信小程序(一)_html_04

(2). flex-wrap：如果一条轴线排不下，如何换行

Nowrap:

<style type="text/css">
    .container{
        width: 100%;
        background: red;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>

结果：(自动变为33%)

微信小程序(一)_css_05

wrap-reverse：自动折行，按照轴方向反方向折行

微信小程序(一)_css_06

(3). justify-content: 定义主轴上的对齐方式

<style type="text/css">
    .container{
        width: 100%;
        background: red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>

结果：

微信小程序(一)_开发者工具_07

(4). align-items 定义在交叉轴方向的对齐方式。比如主轴为横向，纵轴为交叉轴. 需要设置高度，纵轴高度，否则看不到效果

<style type="text/css">
    .container{
        width: 100%;
        height: 500px;
        background: red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>

结果：

微信小程序(一)_开发者工具_08

align-items: center; 结果

微信小程序(一)_html_09

(5). align-content: center;

多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。比如在上面(4) 的基础上，有横轴和纵轴 (指定了高度和宽度就有2个轴)

<style type="text/css">
    .container{
        width: 100%;
        height: 500px;
        background: red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>

结果：

微信小程序(一)_开发者工具_10

(6). order: 指定顺序，值越小越靠前

<style type="text/css">
    .container{
        width: 100%;
        background: red;
        display: flex;
        flex-direction: column;
    }
    .container div {
        width: 40%;
        background: #f90;
    }
</style>
<body>

<div class="container">
    <div style="order: 0;">111</div>
    <div style="order: -1;">222</div>
</div>

结果：

微信小程序(一)_开发者工具_11

2. 移动端像素相关知识

物理像素

屏幕的分辨率。纵横向上的像素点数，单位是px。物理像素是独立存在的像素。
设备能控制显示的最小单元，可以把物理像素看成是对应的像素点，像素越高显示的越清晰。

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

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

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

微信小程序(一)_开发者工具_12

尺寸：可以认为是设备对角线的长度，单位是英寸
设备独立像素：414*896

dpr比 & DPI & PPI

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

3. 移动端适配方案

1. Viewport 适配

viewport适配

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

标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

initial-scale 指定缩放比例，值为0-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）是指相对于根元素的字体大小的单位。

适配原因

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

测试代码

<!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>

查看渲染后的界面代码

<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>

可以看到实际是加了 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

【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】

上一篇：kafka工作原理

下一篇：微信小程序(二)特点&语法介绍&demo获取用户授权信息

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯