前序
小法式办事少不了很多的详情页,这些详情页大致都有类似的结构,假如一个一个页面去做,难免工作量大。静态详情页看来是必须的。下面记录了理论的案例。
页面跳转
<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)。
假如都做成自力文件上传云上,经过下载读取获得数据,能够会更简洁些。 |