小程序动态tabBar菜单，根据条件渲染不同的tabBar

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。

做成效果 ：

此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。

此文件编写的组件会作为自定义的tabBar展示出来

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 = {}));

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

一、wxsetNavigationBarTitle

1设置整个小程序通用标题，在appjson里设置：

"window": {

"navigationBarTitleText": "默认标题"

}

复制

2单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：

{

"navigationBarTitleText": "首页"

}

复制

3动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上

wxrequest({

url: "请求接口url",

method: "POST",

data: {},

success: function (res) {

if (resdatacode == 200) {

// 修改navigationBarTitleText

wxsetNavigationBarTitle({

title: goods_name

})

}

}

})

复制



tips：动态设置 > 页面独立设置 > 通用设置

效果图：

当然，另外我们可以通过点击事件来动态设置标题：

test: function () {

wxsetNavigationBarTitle({

title: "我是点击后的标题"

})

}

复制

效果图：

二、wxsetNavigationBarColor

设置页面导航条颜色

wxsetNavigationBarColor({

frontColor: '#ffffff',

backgroundColor: '#ff0000',

animation: {

duration: 400,

timingFunc: 'easeIn'

}

})

复制

frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor：背景颜色值，有效值为十六进制颜色

animation：动画效果

①animation的结构包括：duration，timingFunc；

②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）

效果图：

三、wxshowNavigationBarLoading和wxhideNavigationBarLoading

wxshowNavigationBarLoading：在当前页面显示导航条加载动画

wxhideNavigationBarLoading：在当前页面隐藏导航条加载动画

indexwxml

<button bindtap="showLoading">显示加载动画</button>

<button bindtap="hideLoading">隐藏加载动画</button>

复制

indexjs

// 显示加载动画

showLoading: function () {

wxshowNavigationBarLoading()

},

// 隐藏加载动画

hideLoading: function () {

wxhideNavigationBarLoading()

}

复制

效果图：

四、wxhideHomeButton

隐藏返回首页按钮。微信707版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

工具/原料

微信小程序   web-view

方法/步骤

1、打开微信开发者工具。

2、选择新建小程序。

3、输入项目信息后，点击”确定“。

4、进入开发画面。

5、点击”index wxml“右侧将其他代码都删除，在容器中,添加”web-view“。

6、给这个web-view添加src属性这里添加需要的地址即可。

7、完成后保存修改，在左侧的手机模拟器中,即可查看效果。

大家都知道，针对一款app上面都是展示信息的，那么在小程序中，页面上信息的展示是如何的，接下来进行详细探索：

在微信小程序中，编写页面布局是在wxml文件中进行的，则在wxml文件中，使用<view></view>标签进行内容的包裹，类似html中的<div>,现在进行一个需求的编写，在页面上编写布局，并将js结尾文件中的处理数据进行展示到页面上；

indexwml

indexjs

编译项目，则页面展示如下：

从上面结果可以知道在wxml文件中使用{{}}可以将js文件中指定的内容展示在页面上，现在我们进行动态的展示数据，不需要展示起在page-data中固定的内容,修改js文件内容:

编译项目，显示结果如图：

由此可知，在js中动态的设置内容并将其更新到wml上，则使用 thissetData()，且修改的内容格式符合key:value。

就小程序页面数据展示就分析到这里，希望各位看官们有所收获，有什么错误的地方还望指出！！

把AngularJS开发的页面迁移到微信小程序目录迁移1、每个子模块页面换成Pages目录下的一个子目录，目录命名就是原子模块名。2、原来的通用css、image、fonts等静态资源统一移到resource目录下，需要使用时，对于css样式文件，在对应子模块的wxss文件首部通过import命令引入；替换规则1、div需统一转换成View；2、ng-show统一转换为wx:if；3、ng-click统一转换为bindtap；4、ng-repeat统一用wx:for替换；5、ng-class中的样式选择性绑定可以直接把条件绑定语句嵌入class属性；js代码模块级代码迁移：可将模块级作用域使用的通用逻辑搬到appjs中，通过app对象来引用；或者定义一个util模块，来做动态引入；对于原生与h5交互时用到的自定义事件，需要根据具体场景做处理。子模块级代码迁移：可将Angular子模块代码直接迁移到小程序对应Page对象中，当然，对于Angular特定语法的$对象（例如$scope、$rootscope）的 *** 作，需要做全局替换，替换原则是：1、$scope:与Page对象同生命周期内的$scope，可以直接替换成this；而对于非同一生命周期的（最常见的即是各种callback回调函数），需要将Page对象在方法外做引用保存（例如varself=this），然后在回调函数中使用。2、$rootScope:推荐放入app对象中引用，或者自定义通用模块，然后动态引入；3、数据模型：各页面中建立的数据模型，直接放入json文件中，如果涉及Angular特定语法的 *** 作，可参考上述两点的做法进行替换；4、jsonp请求：将jsonp请求统一替换成wxrequest请求，只是原来的链式写法要换成参数型写法；5、子模块间的页面跳转，$statego统一替换成wxnavigateTo或wxnavigateBack；

出现js因为是导入的小程序中使用了相对路径引用JS文件，而在uni-app中相对路径的引用方式与小程序不同，所以会出现找不到JS文件的情况。解决这个问题的方法是将小程序中使用相对路径引用的JS文件改为绝对路径引用，或者使用uni-app中的相对路径引用方式。

方法一：rpnjs：使用rpnjs实现eval函数功能

*** 作链接：网页链接

方法二：

（1）使用Underscorejs： *** 作链接：网页链接

（2）使用Immutablejs： *** 作链接：网页链接

（3）使用UUID、Base64、Chance： *** 作链接：网页链接

扩展微信小程序框架功能（1）——Promise

ES6 对 Promise 有了原生的支持，但微信开发者工具更新版本（011112200）后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。

扩展微信小程序框架功能（2）——Generator

Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

扩展微信小程序框架功能（3）——函数功能增强

Underscorejs 和 Lodash 是最常用的JavaScript库。

扩展微信小程序框架功能（4）——Immutablejs

Immutablejs 是 Facebook 开发的不可变数据集合。Immutable

Data（不可变数据）一旦创建就不能被修改。通过使用Immutable

Data，可以更容易的处理缓存、回退、数据变化检测等问题，应用开发更简单。

扩展微信小程序框架功能（5）——Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

扩展微信小程序框架功能（6）—日期时间

Momentjs是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Nodejs中。

扩展微信小程序框架功能（7）——正则表达式

XRegExp 是一个开源的 JavaScript库，提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库，支持附加语法、标志以及方法。

扩展微信小程序框架功能（8）——Xml处理

x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。

扩展微信小程序框架功能（9）——加解密

node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。

扩展微信小程序框架功能（10）——测试辅助

Chance是一个 JavaScript 随机数生成工具。Mockjs可以生成随机数据，拦截 Ajax 请求。

方法三：moment

*** 作链接：网页链接

以上就是关于小程序动态tabBar菜单，根据条件渲染不同的tabBar全部的内容，包括:小程序动态tabBar菜单，根据条件渲染不同的tabBar、小程序开发-基础-html+css、微信小程序动态设置央视等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！