小程序页面跳转与动态详情页

前序

小法式办事少不了很多的详情页，这些详情页大致都有类似的结构，假如一个一个页面去做，难免工作量大。静态详情页看来是必须的。下面记录了理论的案例。
页面跳转

<hr/>navigator组件跳转

小法式页面跳转可以在页面端利用navigator组件跳转。示例代码：

1. <!-- index/index.wxml 力先示例-->
2. <view style="text-align: center;margin-top:100rpx;">
3.   <navigator url="/pages/details/index" open-type="redirect" hover-class="other-navigator-hover">在当前页跳转到详情页</navigator>
4. </view>

复制代码

text-align: center：内容居中显现。
navigator：阅读组件。
url="/pages/details/index"：跳转到根目录下pages/details目录下的index.wxml网页。
redirect：跳转。
结果以下：


跳转到的页面代码：

1. <!-- details/index.wxss -->
2. <view  style="text-align: center;margin-top:100rpx;">
3.   详情页
4. </view>

复制代码

跳转后的结果以下图：


需要留意：页面必须都在网站app.json设置文档的"pages"字段下加入，才能有用挪用。比如以下：

1.   "pages": [
2.     "pages/index/index",
3.     "pages/details/index"
4.   ],

复制代码

<hr/>图片跳转

1. <!-- index/index.wxml 力先示例-->
2. <navigator url="/pages/details/index" open-type="redirect" hover-class="other-navigator-hover">
3.       <image class='caseIntroImage' mode="widthFix" src='/pages/index/images/case1.jpg'></image>
4. </navigator>

复制代码

<hr/>传递参数跳转

比如以下页面代码：

1. <!-- index/index.wxml 力先示例-->
2. <navigator url="/pages/details/index?param1=传送参数是：&param2=2" open-type="redirect" hover-class="other-navigator-hover">
3.       <image class='caseIntroImage' mode="widthFix" src='/pages/index/images/case1.jpg'></image>
4. </navigator>

复制代码

跳转页面js代码：

1. //pages/details/index.js
2. Page({
3.   onLoad(options) {
4.     console.log(options.param1);
5.     console.log(options.param2);   
6.   },
7. });

复制代码

结果以下图：


静态详情页

页面跳转大多是照顾参数跳到静态页。
假定有这样的设想：照顾参数跳转到某个产物的详情页，读取相关联的文本文件（.txt），用文本文件里面的内容机关详情页的内容。
<hr/>跳转

以下示例代码：

1. <!-- index/index.wxml 力先示例-->
2. <view style="text-align: center;margin-top:100rpx;">
3.   <navigator url="/pages/details/index?detail=visitingcard" open-type="navigateTo" hover-class="other-navigator-hover">跳转到名片详情页</navigator>
4. </view>

复制代码

<hr/>预备详情页的笔墨

由于小法式端没法读取TXT文件，DOC和别的的文件必须从云端读到当地，所以经过变通的法子，把文本界说为常量字符串，写进visitingcard.js文档。为此在details文件夹下新建一个files文件夹，在files文件夹下新建visitingcard.js文件。其代码示例以下：

1. const 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等。';
2. export const productStr=productText;

复制代码

productText：字符串，以“///标记”作为段落标记。分段后内容以下：

1. <T>是造访人或与人联系时所用的长方形硬纸片。上面印有持有者的姓名、职务、电话、住址、隶属的机构等较根基的信息。名片是广告设想中最多见、最根基的产物工具。
2. <H>常见的建造材料
3. <W>铜版纸
4. <T>铜版纸概况很滑腻，对图像或笔墨印刷顺应性强，色彩艳丽，合适大面积色块，是市场的首选。
5. <T>铜版纸名片市场占比应在90%以上，实现了多量量生产量，故而能极大下出世产本钱，价格昂贵，合适普遍群体。
6. <T>纸的厚度通常是300克。
7. <W>特种纸
8. <T>首要区分于市场上量大的铜版纸，一般指除铜版纸外的别的印刷用纸。
9. <T>特种纸名片或纸张一般具有杰出的质感、或有优美的纹路、或有高雅的纸质。由于特种纸名片一般概况不但滑，是以大大都不合适印大色块名片，且色彩较淡雅。
10. <T>特种纸品种繁多，冰白、尼桑、荷兰白、竹丝、法兰、无穷、甘骨、布纹、象牙卡、美雅超感等，厚度230克－500克间。
11. <T>特种纸名片工艺复杂、生产速度慢，多伴随炀金、过UV、击突、圆角、啤形、折痕等的后加工，一般价格比常规铜版纸高数倍。
12. <W>PVC
13. <T>PVC是塑料产物的一种，具有防水、不易变色、材质坚固、回弹性杰出等优点，近年来PVC名片已经成为名片市场的第二大产物。
14. <T>按照工艺或材料特征，PVC名片有普通哑光、普通亮光、珠光哑光、珠亮光光、磨砂、镭射、拉丝、金箔、银箔等品种。
15. <T>厚度：0.3-0.38mm(银行卡一半厚度)。
16. <P>visitingcard1
17. <D>哑光
18. <P>visitingcard2
19. <D>PVC亮光
20. <P>visitingcard3
21. <D>PVC珠光
22. <P>visitingcard4
23. <D>PVC磨砂
24. <P>visitingcard5
25. <D>PVC通明
26. <P>visitingcard6
27. <D>PVC镭射
28. <W>金箔银箔名片
29. <T>金箔或银箔名片柔嫩性好，手感好，有结果很佳的镭射结果，是一种高级的商务名片。里面两张胶片，中心一张金箔料，把内容打印到通明胶片上，然后与双面带胶的金箔纸塑封，再用切卡机切出而得。制品厚度0.37m
30. <P>visitingcard7
31. <D>金箔
32. <P>visitingcard8
33. <D>银箔
34. <H>常见的尺寸
35. <T>铜版纸和特种纸名片常见制品尺寸为90X54mm、设想（成血后）尺寸为92X56mm。
36. <T>PVC名片常见制品尺寸为89X52mm等，设想（成血后）尺寸为92X55mm。也有制品尺寸为90X54mm等。

复制代码

固然构建这样的字符串，最好是经过编写可履行法式（exe）的方式完成了。
在details下新建images的文件夹用于放图片，在images文件夹下新建visitingcard的文件夹，用于放visitingcard详情页所需要的图片。
以下图：


<hr/>页面模板

先建造一个模板，代码示例以下：

1. <!-- details/index.wxml -->
2. <view class="ViewClass,TitleView">
3.   名片的先容
4. </view>
5. <view class="ViewClass,ParaTextView">
6.   是造访人或与人联系时所用的长方形硬纸片。上面印有持有者的姓名、职务、电话、住址、隶属的机构等较根基的信息。名片是广告设想中最多见、最根基的产物工具。
7. </view>
8. <view class="ViewClass,TitleTwoView">
9.   铜版纸名片
10. </view>
11. <view class="ViewClass">
12.   <image class="ImageClass" mode="widthFix" src="images/visitingcard/visitingcard1.jpg">
13.   </image>
14. </view>
15. <view class="ViewClass,PicTitleView">
16.   铜版纸名片
17. </view>

复制代码

<hr/>页面款式

控制页面元素的显现款式，文档代码以下：

1. /* details/index.wxss */
2. .ViewClass{
3.   margin-top: 10rpx;
4.   margin-left: 30rpx;
5.   margin-bottom: 10rpx;
6. }
7. .TitleView{
8.   margin-right: 30rpx;
9.   font-size: 40rpx;
10.   font-weight: bolder;
11. }
12. .ParaTextView{
13.   margin-right: 35rpx;
14.   text-indent:2em;
15.   font-size:30rpx;
16.   text-align: justify;
17.   text-justify: inter-ideograph;
18.   line-height: 50rpx;
19.   overflow:hidden;
20. }
21. .ImageClass{
22.   width:690rpx;
23. }
24. .PicTitleView{
25.   margin-right: 30rpx;
26.   text-align: center;
27.   font-size: 30rpx;
28. }
29. .TitleTwoView{
30.   margin-right: 30rpx;
31.   font-weight: bolder;
32.   font-size: 37rpx;
33. }

复制代码

<hr/>页面模板结果

告竣以下的结果：


根基页面标签写完了，接下来要按照页面的内容来循环构建详情页标签。
<hr/>页面数据绑定

修改页面代码，把需要替换的view的内容和js端JSON数组LoopArray每项的属性值绑定。以下代码：

1. <!-- details/index.wxml 力先示例 -->
2. <view wx:for="{{LoopArray}}" wx:for-item="item" wx:key="i">
3.   <view class="ViewClass,TitleView" wx:if="{{item.tag=='H'}}">
4.     {{item.content}}
5.   </view>
6.   <view class="ViewClass,ParaTextView" wx:if="{{item.tag=='T'}}">
7.     {{item.content}}
8.   </view>
9.   <view class="ViewClass,TitleTwoView" wx:if="{{item.tag=='W'}}">
10.     {{item.content}}
11.   </view>
12.   <view class="ViewClass" wx:if="{{item.tag=='P'}}">
13.     <image class="ImageClass" mode="widthFix" src="{{item.content}}">
14.     </image>
15.   </view>
16.   <view class="ViewClass,PicTitleView" wx:if="{{item.tag=='D'}}">
17.     {{item.content}}
18.   </view>
19. </view>

复制代码

wx:for="{{LoopArray}}"：对应js端JSON结构的LoopArray数组。
wx:if="{{item.tag=='H'}}：item代表LoopArray的每一项。假如该项的tag属性值为'H'，则显现该view块，否则不显现。持续几个view，对于每一项item，只要唯一的view块会显现。以此来控制笔墨或图片的款式。
{{item.content}}：该块假如显现，会显现item.content值，笔墨或图片。
H代表1级题目，T代表段落文本，W代表2级题目，P代表图片文件名，D代表图片描写。
这样，详情页的笔墨就成了js中的字符串，用“///”取代换行符。
<T>：分段后的T、W等就与item.tag值相对应。
<hr/>js端代码

js端代码以下：

1. // pages/details/index.js  力先示例
2. Page({
3.   onLoad(options) {
4.     const detail=options.detail;
5.     var jsModule = require('files/'+detail+'.js')
6.     var productStr=jsModule.productStr;
7.     const contentArray=productStr.split('///');
8.     const contentArrayLength=contentArray.length;
9.     var LoopArray = [];
10.     for(var i=0;i<contentArrayLength;i++)
11.     {
12.        var content=contentArray[i];
13.        var item = {};
14.        var startString='<';
15.        var endString='>';
16.        var rexStr='(?<='+startString+').*?(?='+endString+')';
17.        var regex = new RegExp(rexStr);
18.        var match = content.match(regex);
19.        var matchVal = match[0];
20.        var matchLength=matchVal.length;
21.        content=content.substring(matchLength+2,content.length);
22.        if(matchVal=='P')content='images/'+detail+'/'+content+'.jpg';
23.        item.tag=matchVal;      
24.        item.content=content;
25.        LoopArray.push(item);
26.     }
27.     this.setData({
28.       LoopArray: LoopArray,
29.     });
30.   },
31. })

复制代码

进程是：接管跳转的参数、导入js文档中的详情页笔墨，分化字符串、分段、提存款式关键词、机关详情页所需要的JSON数据。页面中款式关键词都在每段的开首，这样处置也比力方便。
履行结果以下：


这样，详情页的模板就做成了。其他产物的详情页都可以按这个形式来完成，静态页的结果就出来了，按照传递的参数分歧，供给分歧的详情页，只需变更笔墨和图片就行了。
结语

常用产物或办事的笔墨先容，做成js函数的形式，取代常用的记事本，可以在小法式端运转。
但这样，产物或办事的数目过量，能够要斟酌文件分包的题目（否则不能上传考核，今朝小法式一切分包不能跨越20M，每个分包不能跨越2M）。
假如都做成自力文件上传云上，经过下载读取获得数据，能够会更简洁些。