小程序主题随接口而变

此次开发是为了应对一家私立医院的要求进行的主题定制。公众号这块的主力开发不是我，所以本文主要谈小程序。

简单说说公众号这块吧，公众号在app.vue中调用接口拿到后台配置的色值与vant全局主题定制相结合。如果接口没值就使用全局默认样式。文件中的字体颜色和背景颜色都改为使用全局样式，很多引用图片做背景图的地方改用纯色，把icon图标改成不着色版（需要ui帮忙）,对图标做一个蒙版效果，组件写法如下：

<template><div class="base-icon"><div class="base-icon-img"></div></div>
</template><script lang="ts">
import { commonUtils } from '@utils';
import { computed, defineComponent, toRefs } from 'vue';export default defineComponent({components: {},props: {icon: {type: String,required: true,},active: {type: Boolean,default: true,},color: {type: String,default: 'var(--bg-color-primary)',},height: {type: String,default: undefined,},width: {type: String,default: undefined,},padding: {type: Boolean,default: false,},},setup: (props) => {const { icon, color, active, width, height, padding } = toRefs(props);const backgroundImage = computed(() => {return `url(${commonUtils.getImageSrc(`base-icons/ic_${icon.value}.png`)}) no-repeat`;});const backgroundColor = computed(() => {return active.value ? color.value : '#666';});const heightComputed = computed(() => {if (height.value) {return height.value;}if (padding.value) {return '6.8rem';}return '1.2rem';});const widthComputed = computed(() => width.value || heightComputed.value);const bgColorComputed = computed(() => {if (padding.value) {return '#f8f8f8';}return 'transparent';});const paddingComputed = computed(() => {if (padding.value) {return '1rem';}return '0';});return {backgroundImage,backgroundColor,widthComputed,heightComputed,bgColorComputed,paddingComputed,};},
});
</script><style lang="scss" scoped>
.base-icon {display: inline-block;width: v-bind(widthComputed);height: v-bind(heightComputed);padding: v-bind(paddingComputed);background-color: v-bind(bgColorComputed);
}
.base-icon-img {width: 100%;height: 100%;background-color: v-bind(backgroundColor);
// 蒙版效果-webkit-mask: v-bind(backgroundImage);mask: v-bind(backgroundImage);-webkit-mask-size: 100% 100%;mask-size: 100% 100%;
}
</style>

我这边一直都是使用的公众号做一些基础操作，然后跳转到小程序做一些视频通话这种功能，所以很多参数是需要公众号从url上传过来。如：

pages/consultation-detail/consultation-detail?imAccount=ct-stage_36528a6a799eb43dc8&imToken=36528a6a999eb43dc8&requestUrl=https://dev1.unihealths.com/CT-Stag/&token=eyJhbGciOiJIUzI1NiJ9.yJPcmdhbml6YXRpb25Vbml0WElEIjoiMTA0ODYwMSIsIkRFVklDRSI6IjMwMDcwMDAwNyIsInNob3BVVUlEIjoiNWM3ZWIzYzlkY2VjNDJmM2ExMjBhMGRlMDIyYzY5NWIiLCJVc2VyWElEIjoiMTA3MTY4NSIsInVzZXJUeXBlIjoiNTAxIiwiaW52YWxpZFRpbWUiOiIxNjUwMzU4Mzc0NzU1IiwiZXhwIjoxNjcwOTIyMjA0LCJpYXQiOjE2NzAzMTc0MDR9.UXDUbcvlRKBcOcXza2AW_h0oEDr-ST5bJn1KeQnjlMA&visitId=6906&contextOrganizationGroupId=&organizationId=104861&contextOrganizationId=104860

下面说一说小程序怎么做：

app.wxss中写全局默认样式

page{--bg-color-primary: #819CFC;--bg-color-primary-gradient: linear-gradient(0deg, #8796ff, #93b1ff);--font-color-primary: #7891EC;}

小程序具体页面的js文件下这样写：

 Page({data: {setStyle: ``,},async onLoad(options) {const info = await request({url: `XHealthWebServic/XPatientHome/theme?organizationId=${options.contextOrganizationId}`,method: "get",},wx.getStorageSync("requestUrl")).data;if (info) {wx.setStorageSync("themeInfo", info);wx.setStorageSync("styleInfo",`${info.themeColor? `--bg-color-primary: ${info.themeColor};--bg-color-primary-gradient: ${info.themeColor};`: ``}${info.textColor ? `--font-color-primary: ${info.textColor}` : ``}`);this.setData({setStyle: wx.getStorageSync("styleInfo"),});if (info.themeColor) {wx.setNavigationBarColor({frontColor: "#ffffff",backgroundColor: info.themeColor,});}}
)}
})

其实就是调用接口之后给data中的变量赋值我们要用到的颜色并顺带给标题栏背景色改成接口里的值。

然后我们在wxml页面里最外层的view标签里这样写：

<view style="{{setStyle}}"></view>

成功达到覆盖最外层wxss里样式的效果。

组件的js文件里写法类似如上文，如：

Component({data: { setStyle: `` },ready: function () {this.setData({setStyle: wx.getStorageSync("styleInfo"),});},
});

本人开发中参考了小程序js改变全局样式；具体怎么用还需要根据各位的项目来定嗷。

小程序主题随接口而变相关推荐

linux httppost 请求接口参数被截断_记一次小程序图片安全接口和CountDownLatch的使用...
背景: 我们的小程序由于之前没接入微信官方提供的信息安全接口,导致被警告,下掉了被搜索的权限(手动狗头).然后这两天就花时间在接入上面了,遇到的坑还是挺多的. 微信原开发文档地址:https://de ...
微信小程序注册/登录接口开发
文章目录后端有关说明前端有关说明接口设计小程序注册/登录接口 APP 注册/登录接口 PC Web 端的注册/登录接口小程序注册/登录序列图校验 token 后端有关说明登录和注册的逻辑 ...
小程序开发配置接口域名提示：不在以下 request 合法域名列表中，请参考文档
小程序开发配置接口域名提示:不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/networ ...
蓝色版去水印小程序源码+接口
介绍: 蓝色版小程序源码+接口网盘下载地址: http://kekewangLuo.net/edaLtfZJUE40 图片:
小程序统一服务消息_微信团队发布小程序模板消息能力调整通知：小程序订阅消息接口正式上线...
10月13日,微信团队发布了小程序模板消息能力调整通知.微信团队表示,此前的模板消息接口将停止使用,小程序订阅消息接口正式上线.据了解,新上线的小程序订阅消息,同时支持一次性和长期性订阅消息,用户可以 ...
小程序Canvas原有接口不再维护
画布.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护.  <canvas t ...
mybaitplus 根据id批量进行修改_phpcms小程序插件api接口升级到4.3（新增批量获取、搜索等接口）...
phpcms小程序插件api接口升级到4.3 (1)全部接口进行代码精简优化,减少不必要的重复代码.冗余代码以及注释 (2)修复诸多bug,合并post和get接收方式并统一调度 (3)修改appse ...
微信小程序之获取接口数据展示
上篇说到获取编辑框文本,没看过去看看. 本片介绍简单的接口数据获取,并且展示,采取模拟数据,拉取数据方式方法.文章最后附上DEMO 本篇暂未考虑美化问题,只看功能.如图: 一.简单介绍 1> w ...
微信小程序wx.getLocation接口审核不通过
审核不通过的原因一般包含这几种: 一.当前提审小程序代码包中地理位置相关接口( wx.getLocation )暂未开通分析原因:接口未开通. 解决方法:按下图申请开通对应的接口即可. 二.你所描述 ...

小程序主题随接口而变

小程序主题随接口而变相关推荐

最新文章

热门文章