云裂变营销网
标题:
小程序页面跳转与动态详情页
[打印本页]
作者:
匿名
时间:
2023-3-30 10:36
标题:
小程序页面跳转与动态详情页
前序
小程序服务少不了许多的详情页,这些详情页大体都有相似的结构,如果一个一个页面去做,难免工作量大。动态详情页看来是必须的。下面记录了实践的案例。
页面跳转
<hr/>
navigator组件跳转
小程序页面跳转可以在页面端使用navigator组件跳转。示例代码:
<!-- index/index.wxml 力先示例-->
<view style=&#34;text-align: center;margin-top:100rpx;&#34;>
<navigator url=&#34;/pages/details/index&#34; open-type=&#34;redirect&#34; hover-class=&#34;other-navigator-hover&#34;>在当前页跳转到详情页</navigator>
</view>
复制代码
text-align
: center:内容居中显示。
navigator
:浏览组件。
url=&#34;/pages/details/index&#34;
:跳转到根目录下pages/details目录下的index.wxml网页。
redirect
:跳转。
效果如下:
跳转到的页面代码:
<!-- details/index.wxss -->
<view style=&#34;text-align: center;margin-top:100rpx;&#34;>
详情页
</view>
复制代码
跳转后的效果如下图:
需要注意:页面必须都在网站app.json配置文档的&#34;pages&#34;字段下加入,才能有效调用。比如如下:
&#34;pages&#34;: [
&#34;pages/index/index&#34;,
&#34;pages/details/index&#34;
],
复制代码
<hr/>
图片跳转
<!-- index/index.wxml 力先示例-->
<navigator url=&#34;/pages/details/index&#34; open-type=&#34;redirect&#34; hover-class=&#34;other-navigator-hover&#34;>
<image class=&#39;caseIntroImage&#39; mode=&#34;widthFix&#34; src=&#39;/pages/index/images/case1.jpg&#39;></image>
</navigator>
复制代码
<hr/>
传递参数跳转
比如以下页面代码:
<!-- index/index.wxml 力先示例-->
<navigator url=&#34;/pages/details/index?param1=传送参数是:&param2=2&#34; open-type=&#34;redirect&#34; hover-class=&#34;other-navigator-hover&#34;>
<image class=&#39;caseIntroImage&#39; mode=&#34;widthFix&#34; src=&#39;/pages/index/images/case1.jpg&#39;></image>
</navigator>
复制代码
跳转页面js代码:
//pages/details/index.js
Page({
onLoad(options) {
console.log(options.param1);
console.log(options.param2);
},
});
复制代码
效果如下图:
动态详情页
页面跳转大多是携带参数跳到动态页。
假设有这样的设计:携带参数跳转到某个产品的详情页,读取相关联的文本文件(.txt),用文本文件里面的内容构造详情页的内容。
<hr/>
跳转
以下示例代码:
<!-- index/index.wxml 力先示例-->
<view style=&#34;text-align: center;margin-top:100rpx;&#34;>
<navigator url=&#34;/pages/details/index?detail=visitingcard&#34; open-type=&#34;navigateTo&#34; hover-class=&#34;other-navigator-hover&#34;>跳转到名片详情页</navigator>
</view>
复制代码
<hr/>
准备详情页的文字
由于小程序端无法读取TXT文件,DOC和其它的文件必须从云端读到本地,所以通过变通的办法,把文本定义为常量字符串,写进visitingcard.js文档。为此在details文件夹下新建一个files文件夹,在files文件夹下新建visitingcard.js文件。其代码示例如下:
const productText=&#39;<T>是拜访人或与人联系时所用的长方形硬纸片。上面印有持有者的姓名、职务、电话、住址、从属的机构等较基本的信息。名片是广告设计中最常见、最基本的产品对象。///<H>常见的制作材料///<W>铜版纸///<T>铜版纸表面很光滑,对图像或文字印刷适应性强,色彩鲜艳,适合大面积色块,是市场的首选。///<T>铜版纸名片市场占比应在90%以上,实现了大批量生产量,故而能极大降低生产成本,价格低廉,适合普遍群体。///<T>纸的厚度一般为300克。///<W>特种纸///<T>主要区分于市场上量大的铜版纸,一般指除铜版纸外的其它印刷用纸。///<T>特种纸名片或纸张一般具有良好的质感、或有优美的纹路、或有典雅的纸质。因为特种纸名片一般表面不光滑,因此大多数不适合印大色块名片,且颜色较淡雅。///<T>特种纸种类繁多,冰白、尼桑、荷兰白、竹丝、法兰、无限、甘骨、布纹、象牙卡、美雅超感等,厚度230克-500克间。///<T>特种纸名片工艺复杂、生产速度慢,多伴有炀金、过UV、击突、圆角、啤形、折痕等的后加工,一般价格比常规铜版纸高数倍。///<W>PVC///<T>PVC是塑料产品的一种,具有防水、不易变色、材质坚硬、回弹性良好等优点,近年来PVC名片已经成为名片市场的第二大产品。///<T>根据工艺或材料特性,PVC名片有普通哑光、普通亮光、珠光哑光、珠光亮光、磨砂、镭射、拉丝、金箔、银箔等品种。///<T>厚度:0.3-0.38mm(银行卡一半厚度)。///<P>visitingcard1///<D>哑光///<P>visitingcard2///<D>PVC亮光///<P>visitingcard3///<D>PVC珠光///<P>visitingcard4///<D>PVC磨砂///<P>visitingcard5///<D>PVC透明///<P>visitingcard6///<D>PVC镭射///<W>金箔银箔名片///<T>金箔或银箔名片柔软性好,手感好,有效果很佳的镭射效果,是一种高档的商务名片。外面两张胶片,中间一张金箔料,把内容打印到透明胶片上,然后与双面带胶的金箔纸塑封,再用切卡机切出而得。成品厚度0.37m///<P>visitingcard7///<D>金箔///<P>visitingcard8///<D>银箔///<H>常见的尺寸///<T>铜版纸和特种纸名片常见成品尺寸为90X54mm、设计(成血后)尺寸为92X56mm。///<T>PVC名片常见成品尺寸为89X52mm等,设计(成血后)尺寸为92X55mm。也有成品尺寸为90X54mm等。&#39;;
export const productStr=productText;
复制代码
productText
:字符串,以“///符号”作为段落符号。分段后内容如下:
<T>是拜访人或与人联系时所用的长方形硬纸片。上面印有持有者的姓名、职务、电话、住址、从属的机构等较基本的信息。名片是广告设计中最常见、最基本的产品对象。
<H>常见的制作材料
<W>铜版纸
<T>铜版纸表面很光滑,对图像或文字印刷适应性强,色彩鲜艳,适合大面积色块,是市场的首选。
<T>铜版纸名片市场占比应在90%以上,实现了大批量生产量,故而能极大降低生产成本,价格低廉,适合普遍群体。
<T>纸的厚度一般为300克。
<W>特种纸
<T>主要区分于市场上量大的铜版纸,一般指除铜版纸外的其它印刷用纸。
<T>特种纸名片或纸张一般具有良好的质感、或有优美的纹路、或有典雅的纸质。因为特种纸名片一般表面不光滑,因此大多数不适合印大色块名片,且颜色较淡雅。
<T>特种纸种类繁多,冰白、尼桑、荷兰白、竹丝、法兰、无限、甘骨、布纹、象牙卡、美雅超感等,厚度230克-500克间。
<T>特种纸名片工艺复杂、生产速度慢,多伴有炀金、过UV、击突、圆角、啤形、折痕等的后加工,一般价格比常规铜版纸高数倍。
<W>PVC
<T>PVC是塑料产品的一种,具有防水、不易变色、材质坚硬、回弹性良好等优点,近年来PVC名片已经成为名片市场的第二大产品。
<T>根据工艺或材料特性,PVC名片有普通哑光、普通亮光、珠光哑光、珠光亮光、磨砂、镭射、拉丝、金箔、银箔等品种。
<T>厚度:0.3-0.38mm(银行卡一半厚度)。
<P>visitingcard1
<D>哑光
<P>visitingcard2
<D>PVC亮光
<P>visitingcard3
<D>PVC珠光
<P>visitingcard4
<D>PVC磨砂
<P>visitingcard5
<D>PVC透明
<P>visitingcard6
<D>PVC镭射
<W>金箔银箔名片
<T>金箔或银箔名片柔软性好,手感好,有效果很佳的镭射效果,是一种高档的商务名片。外面两张胶片,中间一张金箔料,把内容打印到透明胶片上,然后与双面带胶的金箔纸塑封,再用切卡机切出而得。成品厚度0.37m
<P>visitingcard7
<D>金箔
<P>visitingcard8
<D>银箔
<H>常见的尺寸
<T>铜版纸和特种纸名片常见成品尺寸为90X54mm、设计(成血后)尺寸为92X56mm。
<T>PVC名片常见成品尺寸为89X52mm等,设计(成血后)尺寸为92X55mm。也有成品尺寸为90X54mm等。
复制代码
当然构建这样的字符串,最好是通过编写可执行程序(exe)的方式完成了。
在details下新建images的文件夹用于放图片,在images文件夹下新建visitingcard的文件夹,用于放visitingcard详情页所需要的图片。
如下图:
<hr/>
页面模板
先制作一个模板,代码示例如下:
<!-- details/index.wxml -->
<view class=&#34;ViewClass,TitleView&#34;>
名片的介绍
</view>
<view class=&#34;ViewClass,ParaTextView&#34;>
是拜访人或与人联系时所用的长方形硬纸片。上面印有持有者的姓名、职务、电话、住址、从属的机构等较基本的信息。名片是广告设计中最常见、最基本的产品对象。
</view>
<view class=&#34;ViewClass,TitleTwoView&#34;>
铜版纸名片
</view>
<view class=&#34;ViewClass&#34;>
<image class=&#34;ImageClass&#34; mode=&#34;widthFix&#34; src=&#34;images/visitingcard/visitingcard1.jpg&#34;>
</image>
</view>
<view class=&#34;ViewClass,PicTitleView&#34;>
铜版纸名片
</view>
复制代码
<hr/>
页面样式
控制页面元素的显示样式,文档代码如下:
/* details/index.wxss */
.ViewClass{
margin-top: 10rpx;
margin-left: 30rpx;
margin-bottom: 10rpx;
}
.TitleView{
margin-right: 30rpx;
font-size: 40rpx;
font-weight: bolder;
}
.ParaTextView{
margin-right: 35rpx;
text-indent:2em;
font-size:30rpx;
text-align: justify;
text-justify: inter-ideograph;
line-height: 50rpx;
overflow:hidden;
}
.ImageClass{
width:690rpx;
}
.PicTitleView{
margin-right: 30rpx;
text-align: center;
font-size: 30rpx;
}
.TitleTwoView{
margin-right: 30rpx;
font-weight: bolder;
font-size: 37rpx;
}
复制代码
<hr/>
页面模板效果
达成如下的效果:
基本页面标签写完了,接下来要根据页面的内容来循环构建详情页标签。
<hr/>
页面数据绑定
改动页面代码,把需要替换的view的内容和js端JSON数组LoopArray每项的属性值绑定。如下代码:
<!-- details/index.wxml 力先示例 -->
<view wx:for=&#34;{{LoopArray}}&#34; wx:for-item=&#34;item&#34; wx:key=&#34;i&#34;>
<view class=&#34;ViewClass,TitleView&#34; wx:if=&#34;{{item.tag==&#39;H&#39;}}&#34;>
{{item.content}}
</view>
<view class=&#34;ViewClass,ParaTextView&#34; wx:if=&#34;{{item.tag==&#39;T&#39;}}&#34;>
{{item.content}}
</view>
<view class=&#34;ViewClass,TitleTwoView&#34; wx:if=&#34;{{item.tag==&#39;W&#39;}}&#34;>
{{item.content}}
</view>
<view class=&#34;ViewClass&#34; wx:if=&#34;{{item.tag==&#39;P&#39;}}&#34;>
<image class=&#34;ImageClass&#34; mode=&#34;widthFix&#34; src=&#34;{{item.content}}&#34;>
</image>
</view>
<view class=&#34;ViewClass,PicTitleView&#34; wx:if=&#34;{{item.tag==&#39;D&#39;}}&#34;>
{{item.content}}
</view>
</view>
复制代码
wx:for=&#34;{{LoopArray}}&#34;
:对应js端JSON结构的LoopArray数组。
wx:if=&#34;{{item.tag==&#39;H&#39;}}
:item代表LoopArray的每一项。如果该项的tag属性值为&#39;H&#39;,则显示该view块,否则不显示。连续几个view,对于每一项item,只有唯一的view块会显示。以此来控制文字或图片的样式。
{{item.content}}
:该块如果显示,会显示item.content值,文字或图片。
H
代表1级标题,T代表段落文本,W代表2级标题,P代表图片文件名,D代表图片描述。
这样,详情页的文字就成了js中的字符串,用“///”代替换行符。
<T>
:分段后的T、W等就与item.tag值相对应。
<hr/>
js端代码
js端代码如下:
// pages/details/index.js 力先示例
Page({
onLoad(options) {
const detail=options.detail;
var jsModule = require(&#39;files/&#39;+detail+&#39;.js&#39;)
var productStr=jsModule.productStr;
const contentArray=productStr.split(&#39;///&#39;);
const contentArrayLength=contentArray.length;
var LoopArray = [];
for(var i=0;i<contentArrayLength;i++)
{
var content=contentArray[i];
var item = {};
var startString=&#39;<&#39;;
var endString=&#39;>&#39;;
var rexStr=&#39;(?<=&#39;+startString+&#39;).*?(?=&#39;+endString+&#39;)&#39;;
var regex = new RegExp(rexStr);
var match = content.match(regex);
var matchVal = match[0];
var matchLength=matchVal.length;
content=content.substring(matchLength+2,content.length);
if(matchVal==&#39;P&#39;)content=&#39;images/&#39;+detail+&#39;/&#39;+content+&#39;.jpg&#39;;
item.tag=matchVal;
item.content=content;
LoopArray.push(item);
}
this.setData({
LoopArray: LoopArray,
});
},
})
复制代码
过程是:接受跳转的参数、导入js文档中的详情页文字,分解字符串、分段、提取样式关键词、构造详情页所需要的JSON数据。页面中样式关键词都在每段的开头,这样处理也比较方便。
执行效果如下:
这样,详情页的模板就做成了。其他产品的详情页都可以按这个模式来完成,动态页的效果就出来了,根据传递的参数不同,提供不同的详情页,只需变更文字和图片就行了。
结语
常用产品或服务的文字介绍,做成js函数的形式,代替常用的记事本,可以在小程序端运行。
但这样,产品或服务的数量过多,可能要考虑文件分包的问题(不然不能上传审核,目前小程序所有分包不能超过20M,每个分包不能超过2M)。
如果都做成独立文件上传云上,通过下载读取获得数据,可能会更简便些。
欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/)
Powered by Discuz! X3.4