zl程序教程

您现在的位置是:首页 >  其它

当前栏目

wx-open-launch-weapp 样式问题

样式 open wx launch 问题
2023-09-27 14:25:56 时间
前言

222234.webp.jpg配图源自 Freepik

这篇文章主要介绍 如何在  wx-open-launch-weapp  写样式的踩坑过程 以 React 为例 。


正文

00.webp.jpg


由于在 wx-open-launch-weapp 添加样式会非常多的问题 可能各种不生效。

因此 我会这样去设计 container 为点击唤起小程序的区域 相对定位 而 content 则是该区域的展示内容 wx-open-launch-weapp 则是占满唤起区域 绝对定位 。

 div class container 

 div class content 页面内容 /div 

 wx-open-launch-weapp 省略了一部分代码 /wx-open-launch-weapp 

 /div 

.container {

 position: relative;

 margin: 30px;

 height: 182px;

.content {

 width: 100%;

 height: 100%;

}

为什么要这样设计 后面的方案会给出答案。


以上为简化版 完整示例请看文章末尾。


1. 方案一


当前这个需求 由于我的 content 只是一张图片 所以我的第一个想法是这样的。

为了方便对比效果 分别设置了背景色。其中紫色部分为 wx-open-launch-weapp 区域 粉红部分为 script type text/wxtag-template 区域。

 div class container 

 wx-open-launch-weapp

 username gh_xxxxxxxx 

 path pages/index/index.html 

 style {{ width: 100% , height: 100% , opacity: 0.3, background: blue }}

 script type text/wxtag-template 

 div style {{ opacity: 0.3, background: red }} / 

 /script 

 /wx-open-launch-weapp 

 /div 

.container {

 margin: 30px;

 height: 182px;

 background-image: url(../../../images/banner-movecar.png);

 background-repeat: no-repeat;

 background-position: center center;

 background-size: 100% 100%;

}


将 wx-open-launch-weapp 宽高设为 100% 我们先看下效果


6.webp.jpg


这时候只出现了紫色部分 且紫色部分点击也没有任何效果 不能唤起小程序。然后 我想是不是 script type text/wxtag-template 未设置宽高的问题 将其设置为 100% 之后 效果一样均无效。


2. 方案二


由于上一个方案流产之后 马上想到会不会是 100% 不生效 于是想着将宽高设置为具体值。如下

 div class container 

 wx-open-launch-weapp

 username gh_xxxxxxxx 

 path pages/index/index.html 

 style {{ width: 6.9rem , height: 1.82rem , opacity: 0.3, background: blue }}

 script type text/wxtag-template 

 div style {{ width: 100% , height: 100% , opacity: 0.3, background: red }} / 

 /script 

 /wx-open-launch-weapp 

 /div 


5.webp.jpg


效果如上 尽管 wx-open-launch-weapp 占满 container 的宽度。可高度。。。接着我尝试设为 {{ width: 6.9rem , height: 100% }} 效果完全一致 高度仍无法占满 container 的高度。


PS 由于我拿到的是最为常见的 750px 的视觉设计稿 因此 100px 对应的是 1rem。在打包过程 会采用相应的 loader 去进行单位的转换。由于 loader 只能处理 css、less、scss 等文件 而无法处理内联的样式 所以我这里会写成 rem 为单位。


我又想是不是 rem 单位问题 然后我又改为 {{ width: 690px , height: 182px }} 看看有什么不一样 但高度仍然如上图一样 可宽度倒是有变化。


多次调整宽高及其单位后发现 宽度可控 可高度始终如一。


3. 方案三


到这里想吐了 我想着先解决 wx-open-launch-weapp 占满 container 的问题 暂时忽略 script type text/wxtag-template 的问题。

既然方案二尝试了各种可能性 无论怎么设置宽高仍不尽人意。于是采用绝对布局看看

由于此前设置了 background 来区分 于是将 script type text/wxtag-template 区域宽度暂时设为 90% 方便对比结果。

 div class container 

 wx-open-launch-weapp

 username gh_xxxxxxxx 

 path pages/index/index.html 

 style {{ position: absolute , width: 100% , height: 100% , opacity: 0.3, background: blue }}

 script type text/wxtag-template 

 div style {{ width: 90% , height: 100% , opacity: 0.3, background: red }} / 

 /script 

 /wx-open-launch-weapp 

 /div 

.container {

 position: relative

 /* 其他无变化 */

}


4.webp.jpg


好像看到希望了 wx-open-launch-weapp 已经占满 container 了。


但是这时候 script type text/wxtag-template 的区域仍然没有展示出来 那我是不也要设为绝对布局呢 试试看

 div class container 

 wx-open-launch-weapp

 username gh_xxxxxxxx 

 path pages/index/index.html 

 style {{ position: absolute , width: 100% , height: 100% , opacity: 0.3, background: blue }}

 script type text/wxtag-template 

 div style {{ position: absolute , width: 90% , height: 100% , opacity: 0.3, background: red }} / 

 /script 

 /wx-open-launch-weapp 

 /div 


效果如下


PS 注意这里宽度其实是没问题的 写成 100% 就能横向占满。


3.webp.jpg


好像快成功了 高度还是不对。其中紫色部分属于 wx-open-launch-weapp 而粉红部分属于 script type text/wxtag-template 。所以点击粉红区域可以正常唤起小程序了。


细心的同学可能发现了 缺的那部分高度跟未设置布局时的高度是一样的 为什么会这样 我也没找到原因。有知道的同学可以告诉我哦 谢谢。

若将 script type text/wxtag-template 设为 relative 布局 我试了 发现是不行的。


然后 又想到将 top 设为 0 发现可以了。

2.webp (1).jpg


为了兼容性 于是我谨慎地将 top、left 均设为 0。

到这里 感觉可以收尾了。


4. 最终解决方案


回到文章开头的设计


container 为点击唤起小程序的区域 相对定位 而 content 则是该区域的展示内容 wx-open-launch-weapp 则是占满唤起区域 绝对定位 。


考虑到上面就一个宽高的问题 就那么难搞了。所以我想把页面元素与唤起小程序的区域分开来 是不是省心很多。

完整示例

import React, { useState } from react 

import style from ./index.scss 

export default function Demo() {

 return (

 div className {style.container} 

 div className {style.content} 

 {/* 这里写页面内容 */}

 /div 

 wx-open-launch-weapp

 username gh_xxxxxxxx 

 path pages/index/index.html 

 style {{ position: absolute , top: 0, left: 0, width: 100% , height: 100% }}

 script type text/wxtag-template 

 {/* 这里唤起小程序的点按区域 */}

 div style {{ position: absolute , top: 0, left: 0, width: 100% , height: 100% , opacity: 0 }} / 

 /script 

 /wx-open-launch-weapp 

 /div 

}

// index.scss

.container {

 position: relative;

 margin: 30px;

 height: 182px;

.content {

 width: 100%;

 height: 100%;

 background-image: url(../../../images/banner-movecar.png);

 background-repeat: no-repeat;

 background-position: center center;

 background-size: 100% 100%;

}


这个过程差点吐血 可喜的是可以愉快地唤起小程序了。


2.webp.jpg

The end.



uni-app入门:页面布局之window和tabbar 每个页面按照结构可以分成三部分:window page tabbar.其中window和tabbar一般比较固定,page是平常业务开展的主要载体,根据业务需求进行页面配置。下面主要讲一下window和tabbar。
android 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。
图片 预览,和保存 功能 应该是很常见的APP 功能 。实现起来也很简单。 这里用到的组件是:https://github.com/ascoders/react-native-image-viewer 看下新效果图: