微信小程序基础知识

最新推荐文章于 2023-03-03 11:42:40 发布

点康慕

最新推荐文章于 2023-03-03 11:42:40 发布

阅读量256

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/MOOG007/article/details/107573210

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文对比了小程序与网页、APP的开发区别，强调小程序的无需安装、触手可及的特性。介绍了小程序的运行环境，其在微信内的四大特性，以及主要应用场景。详细探讨了小程序的目录结构和flex布局，特别是`justify-content`属性在主轴对齐中的作用。

摘要由CSDN通过智能技术生成

小程序开发 vs 网页开发

网页开发中的渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应
网页开发者可以使用各种浏览器暴露出来的DOM API，进行DOM选中和操作
在小程序中，页面渲染和业务逻辑是分离的，分别运行在不同的线程中
（1）逻辑层运行在JSCore中，并没有一个完整浏览器对象，因此缺少相关的DOM API和BOM API
（2）在网页开发中非常熟悉的一些库，例如jQuery、Zepto等，在小程序中无法运行的
（3）SCore的环境同NodeJS环境也是不完全相同的，所以一些NPM的包在小程序中也是无法使用的
小程序的性能介于纯网页开发与原生(native)开发之间

小程序的运行环境

运行环境	逻辑层	渲染层
IOS	JavascriptCore	WKWebView
Android	V8	chromium定制内核
微信开发者工具	NWJS	Chrome WebView

什么是微信小程序

简称小程序：Mini Program：是一种不需要下载安装即可使用的应用，于2017年1月9日正式上线
有点像是镶嵌在微信中的“APP”
小程序的4大特性：无需安装、触手可及、用完即走、无需卸载
实际上小程序使用之前还是需要下载安装的：下载–>安装–>使用：只不过微信官方对小程序的安装包(release包) 有大小限制，比如目前限制的是不能超过2M：所以用户感觉不到小程序的下载过程：因为小，所以快，所以感觉不到下载的过程
由于要是用户感觉无需安装的特性，所以必须对小程序大小进行限制：例如目前限制的大小为2M：因此，开发中用到的资源（大图片、音频、视频等）也尽量放在服务器端
目前小程序的主要入口：扫码、微信内搜索、点击聊天中分享的小程序、点击公众号菜单
目前是无法分享到盆友圈
小程序的一些应用场景：不经常使用、但是刚需、不会停留太久的简单工具：例如：天气预报、买票（车票、机票、门票、电影票）、出行、住宿、话费、缴费、外卖、快递等

小程序 vs APP

安装使用
（1）小程序：无需安装、无需卸载、简单易用、占用内存较小
（2）APP：需要主动联网下载安装APP、不想用了需要主动下载
开发
（1）小程序：跨平台、开发门槛低、开发周期短、开发成本低（对初创企业来说是个很好的选择）
（2）APP：开发成本高、每一个平台都要维护一套代码（目前也有ReactiveNative、Flutter等跨平台方案）
发布上线
（1）小程序：提交到微信公众平台审核
（2） APP：提交到应用商店审核（Apple的App Store常有审核不通过的情况，审核周期也较长）
其他：小程序用户体验、功能丰富度、开发性不如APP

小程序开发的目录结构

小程序主要包括1个描述整体程序的app和多个描述各自页面的page
app部分由3个文件组成，必须放在项目的根目录：文件名固定
（1）app.js： 必须存在
（2）app.json：必须存在
（3）app.wxss：可以没有
1个页面由4个文件组成：这4个文件必须具有相同的路径和文件名：不要求目录名与文件名相同
（1） js：必须存在
（2）wxml：必须存在
（3）json：可以没有
（4）wxss：可以没有

小程序中的flex布局

flex布局（Flexible布局，弹性布局）是在小程序开发经常使用的布局方式
开启了flex布局的元素叫：flex container：设置元素的display属性为flex或inline-flex

display: flex;        /* flex container以block-level形式存在：块级元素 */
display: inline-flex; /* flex container以inline-level形式存在：行内元素 */

flex container里面的直接子元素称之为：flex items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        .container {
            border: 1px solid red;     
            width: 600px;
            height: 400px;
            display: flex; /*开启了display属性为flex元素称之为flex container*/
        }
        .items {
            width: 150px;
            height: 150px;
        }
        .item1 {
            background-color: red;
        }
        .item2 {
            background-color: green;
        }
        .item3 {
            background-color: blue;
        }

        .sub {
            width: 100px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="container"> <!--flex container-->
      <div class="items item1">
          <div class='sub'>
          </div>
      </div>
      <div class="items item2"></div>
      <div class="items item3"></div>
    </div>
</body>
</html>

在这里插入图片描述

flex container容器存在两个轴：主轴（main axis）与交叉轴（cross axis）：主轴是可以设置为水平的还是垂直的，交叉轴是一直垂直于主轴的
flex-direction属性决定了main axis的方向：有4个取值：
（1）row：默认值：主轴从左到右，交叉轴从上到下
（2）row-reverse：主轴从右到左，交叉轴从上到下
（3）column：主轴从上到下，交叉中从左到右
（4）column-reverse：主轴从下到上，交叉轴从左到右
flex item默认都是沿着main axis（主轴）从main start开始往main end方向排布
flex container上的css属性

属性名	说明
flex-direction	该属性加在flex container元素身上:
justify-content	该属性加在flex container元素身上：解决flex item在主轴上的对齐方式
flex-flow
flex-wrap
align-items
align-content

justity-content

取值：flex-start：flex item与main start对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        .container {
            border: 1px solid red;     
            width: 600px;
            height: 400px;
            display: flex; /*开启了display属性为flex元素称之为flex container*/
            justify-content: flex-start; /*flex-start是justify-content属性的默认值*/
            /* flex item在main axis方向上从main start到main end方向排布 */
        }
        .items {
            width: 150px;
            height: 150px;
        }
        .item1 {
            background-color: red;
        }
        .item2 {
            background-color: green;
        }
        .item3 {
            background-color: blue;
        }

        .sub {
            width: 100px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="container"> <!--flex container-->
      <div class="items item1">
          <div class='sub'>

          </div>
      </div>
      <div class="items item2"></div>
      <div class="items item3"></div>
    </div>
</body>
</html>

在这里插入图片描述

取值：flex -end：与main end对齐
取值：center
取值：space-between
（1）flex item之间的间距相等
（2）与main start、main end两端对齐
取值：space-evenly
（1）flex item之间等距离
（2）flex item与main start、main end之间的距离等于flex item之前的距离
取值：space-around
（1）flex item之间等距离
（2）flex item与main start、main end之间的距离是flex item距离的一半

点康慕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序基础知识

文章目录小程序开发 vs 网页开发小程序的运行环境什么是微信小程序小程序 vs APP小程序开发的目录结构小程序中的flex布局小程序开发 vs 网页开发网页开发中的渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应网页开发者可以使用各种浏览器暴露出来的DOM API，进行DOM选中和操作在小程序中，页面渲染和业务逻辑是分离的，分别运行在不同的线程中（1）逻辑层运行在JSCore中，并没有一个完整浏览器对象，因此缺少相关的DOM API和BOM API（2）在网页开发中非常熟悉
复制链接

扫一扫

专栏目录