微信小程序开发-快捷键、标签

格式调整

界面相关

分割线

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR= 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1在JavaScript中，通过windowdevicePixelRatio来获取

2在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}

二、利用js来动态设置

!(function(doc, win){vardocEle = docdocumentElement,        evt ="onorientationchange"inwindow"orientationchange":"resize",        fn =function(){varwidth = docEleclientWidth;            width && (docElestylefontSize =20 (width /320) +"px");        };        winaddEventListener(evt, fn,false);    docaddEventListener("DOMContentLoaded", fn,false); }(document,window));

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

!function(win, lib){vartimer,        doc    = windocument,        docElem = docdocumentElement,        vpMeta  = docquerySelector('meta[name="viewport"]'),        flexMeta = docquerySelector('meta[name="flexible"]'),        dpr  =0,        scale =0,        flexible = libflexible || (libflexible = {});// 设置了 viewport metaif(vpMeta) {consolewarn("将根据已有的meta标签来设置缩放比例");varinitial = vpMetagetAttribute("content")match(/initial\-scale=([\d\]+)/);if(initial) {            scale =parseFloat(initial[1]);// 已设置的 initialScaledpr =parseInt(1/ scale);// 设备像素比 devicePixelRatio}    }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMetagetAttribute("content");if(flexMetaContent) {varinitial = flexMetaContentmatch(/initial\-dpr=([\d\]+)/),                maximum = flexMetaContentmatch(/maximum\-dpr=([\d\]+)/);if(initial) {                dpr =parseFloat(initial[1]);                scale =parseFloat((1/ dpr)toFixed(2));            }if(maximum) {                dpr =parseFloat(maximum[1]);                scale =parseFloat((1/ dpr)toFixed(2));            }        }    }// viewport 或 flexible// meta 均未设置if(!dpr && !scale) {// QST// 这里的 第一句有什么用 // 和 Android 有毛关系 varu = (winnavigatorappVersionmatch(/android/gi), winnavigatorappVersionmatch(/iphone/gi)),            _dpr = windevicePixelRatio;// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ( (_dpr >=3&& (!dpr || dpr >=3))                        3: (_dpr >=2&& (!dpr || dpr >=2))                            2:1)                :1;        scale =1/ dpr;    }    docElemsetAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) {        vpMeta = doccreateElement("meta");                vpMetasetAttribute("name","viewport");        vpMetasetAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElemfirstElementChild) {            docElemfirstElementChildappendChild(vpMeta)        }else{vardiv = doccreateElement("div");            divappendChild(vpMeta);            docwrite(divinnerHTML);        }    }functionsetFontSize(){varwinWidth = docElemgetBoundingClientRect()width;if(winWidth / dpr >540) {            (winWidth =540 dpr);        }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10;        docElemstylefontSize = baseSize +"px";        flexiblerem = winrem = baseSize;    }// 调整窗口时重置winaddEventListener("resize",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// 这一段是我自己加的// orientationchange 时也需要重算下吧winaddEventListener("orientationchange",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// pageshow// keyword: 倒退 缓存相关winaddEventListener("pageshow",function(e){if(epersisted) {            clearTimeout(timer);            timer = setTimeout(setFontSize,300);        }    },false);// 设置基准字体if("complete"=== docreadyState) {        docbodystylefontSize =12 dpr +"px";    }else{        docaddEventListener("DOMContentLoaded",function(){            docbodystylefontSize =12 dpr +"px";        },false);    }      setFontSize();    flexibledpr = windpr = dpr;    flexiblerefreshRem = setFontSize;    flexiblerem2px =function(d){varc =parseFloat(d) thisrem;if("string"==typeofd && dmatch(/rem$/)) {            c +="px";        }returnc;    };    flexiblepx2rem =function(d){varc =parseFloat(d) /thisrem;if("string"==typeofd && dmatch(/px$/)) {            c +="rem";        }returnc;    }}(window,windowlib || (windowlib = {}));

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

1页面url传参

2data-属性传参

3缓存传参

4全局变量传参

1页面url传参

navigator标签里面设置url后面用？加上key=value键值对模式传参，可以绑定动态数据

2data-属性传参

通过data-属性设置产生，在通过url传递参数，其本质还是通过url传参

3,缓存传参

小程序缓存分为异步和同步，一般使用同步；方法类似于h5的本地存储；

4全局变量

Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？

不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。

uni-app 页面路由为框架统一管理的，我们需要在 pagejson 文件里配置每个页面路由以及页面样式，有些类似小程序中的 appjson 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。

项目初始化完成，对应的 pagejson 文件为：

uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：

uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。

1、navigator组件跳转

类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 pagejson 中注册。

navigator 属性有：

open-type 有效值

2、uni-app API 跳转

使用 API 页面跳转方式有：

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

方式1：onLoad 接收

方式2：setup语法糖接收

onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。

看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：>

（1）使用本地缓存

（2）通过页面路由

在使用url进行参数传递时候，传递数据有字节限制，如果要传递对象，需要先把对象通过JSONstringify转换成字符串，接收或再通过JSONparse转换成对象

demo

<template is="模板名" data="数据对象" />

A页面跳转到B页面

页面传值

微信小程序 页面传值详解

一 跨页面传值

1 用 navigator标签传值或 wxnavigator, 比如

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受

如果需要传多个参数, 用 & 链接即可

如果要传 数组, 字典等复杂类型, 要先用 JSONstringify() 转成字符串传递

注 : 如果转化的字符串中 有""这个符号, 则只会传递""以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个""敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

这里可以传字符串, 也能传数组等,

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法

3 写入本地, 跨页面在取出来 wxsetStorage/wxgetStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

4 把 数据声明为全局变量

var detail = getApp()detail; 可在任何页面获取

二 页内传值

1 设置id的方法标识跳转后传递后的参数

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = ecurrentTargetid;

2 设置 data-xxx 的方法来标识要传递的值

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = ecurrentTargetdatasetindex; 其他的参数取出也如此, var type = ecurrentTargetdatasettype;

3 form表单和input输入框

方法1：A页面跳转链接添加参数，B页面onLoad 接收

方法2：设置全局变量 globalData，用的少，一般适用于全局共享的一份信息，如用户open_id等

以上就是关于微信小程序开发-快捷键、标签全部的内容，包括:微信小程序开发-快捷键、标签、小程序开发-基础-html+css、微信小程序页面之间传参等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！