欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

我的第一个上线小程序,三篇其三

程序员文章站 2022-06-27 21:47:49
LayaBox案例分享 小程序开篇(3) 不知不觉已经是上线小程序基础篇的最后一篇了,今天我会把源码发到本文的底部,有需要的可以拿去练手。 大家可以体验一下,请扫码: 这个页面我们主要用到的知识有;布局依然是WEUI;数据解析插件WxParse,下面会额外分享一下WxParse的两种用法;微信小程序 ......

 

layabox案例分享 小程序开篇(3)

不知不觉已经是上线小程序基础篇的最后一篇了,今天我会把源码发到本文的底部,有需要的可以拿去练手。

大家可以体验一下,请扫码:

我的第一个上线小程序,三篇其三

这个页面我们主要用到的知识有;布局依然是weui;数据解析插件wxparse,下面会额外分享一下wxparse的两种用法;微信小程序的网络请求方法wx.request;微信小程序的事件绑定方式。大家可以在留言区留言,我会尽量回答。

按照惯例我们先上图,

我的第一个上线小程序,三篇其三

今天我们分享“layabox案例分享”小程序中的最后一个页面——明细页面,这个页面主要用到wxparse插件,其主要作用是将html片段转换成微信小程序wxml可解析的片段。详细说明大家可以度娘或者直接跳转 https://github.com/icindy/wxparse,我这里举例两种用法。

首先都需要将wxpase插件内容复制到微信小程序目录下,可以自行放置目录。

其一,单个html片段使用:

//在使用的view中引入wxparse模块
var wxparse = require('../../wxparse/wxparse.js');


//在使用的wxss中引入wxparse.css,可以在app.wxss
@import "/wxparse/wxparse.wxss";

 

//js 文件中处理html片段

wxparse.wxparse('article', 'html', article, that, 5);

 

//wxml文件中绑定数据

// 引入模板
<import src="你的路径/wxparse/wxparse.wxml"/>
//这里data中article为bindname
<template is="wxparse" data="{{wxparsedata:article.nodes}}"/>

 

其二,html数组

//在使用的view中引入wxparse模块,这里有区别与单个html片段转换,引入另一个js文件
var wxparse = require('../wxparse/html2json.js');


//在使用的wxss中引入wxparse.css,可以在app.wxss
@import "/wxparse/wxparse.wxss";

 

//js 文件中处理html片段

var arr=[];
if (res.data.data.length>2){
    arr.push(wxparse.html2json(res.data[0].content, 'contentdata'));
    arr.push(wxparse.html2json(res.data[1].content, 'contentdata'));
    arr.push(wxparse.html2json(res.data[2].content, 'contentdata'));
 that.setdata({
  htmllist: arr//记得这里要加入
 });
}

//wxml文件中绑定数据

// 引入模板
<import src="你的路径/wxparse/wxparse.wxml"/>
//这里data中article为bindname
<template is="wxparse" data="{{wxparsedata:htmllist[0].nodes}}" />

<template is="wxparse" data="{{wxparsedata:htmllist[1].nodes}}" />

<template is="wxparse" data="{{wxparsedata:htmllist[2].nodes}}" />

 

知识点讲解结束,下面上传wxml文件内容:

<!--pages/detail/detail.wxml-->
<!--pages/home/home.wxml-->
<!-- 引入模板 -->
<import src="../../components/wxparse/wxparse.wxml"/>

<view class="page">
    <!--页头-->
    <view class="page__hd">
    </view>
    <!--主体-->
    <view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeindex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabclick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderleft}}px; transform: translatex({{slideroffset}}px); -webkit-transform: translatex({{slideroffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeindex != 0}}">
                    
                    <template is="wxparse" data="{{wxparsedata:htmllist[0].nodes}}" />
                </view>
                <view class="weui-tab__content" hidden="{{activeindex != 1}}">
                    <template is="wxparse" data="{{wxparsedata:htmllist[1].nodes}}" />
                </view>
                <view class="weui-tab__content" hidden="{{activeindex != 2}}">
                    <template is="wxparse" data="{{wxparsedata:htmllist[2].nodes}}" />
                </view>
            </view>
        </view>
    </view>
    <!--页脚-->
    <view class="weui-footer">
      <view class="weui-footer__links">
          <navigator url="" class="weui-footer__link">莹百游</navigator>
      </view>
      <view class="weui-footer__text">copyright © 莹百游</view>
  </view>
</view>

  js文件内容

var wxparse = require('../../components/wxparse/html2json.js');
var sliderwidth = 96; // 需要设置slider的宽度,用于计算中间位置

page({
  data: {
    tabs: ["简介", "内容学习", "面试题"],
    activeindex: 0,
    slideroffset: 0,
    sliderleft: 0,
    htmllist:[]
  },
  onload: function (option) {
    wx.showloading({
      title: '加载中',
      mask: true
    })
    var that=this;
    wx.getsysteminfo({
      success: function (res) {
        that.setdata({
          sliderleft: (res.windowwidth / that.data.tabs.length - sliderwidth) / 2,
          slideroffset: res.windowwidth / that.data.tabs.length * that.data.activeindex
        });
      }
    });

    wx.request({
      url: 'api.text',//这里请自行跟换
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        var arr=[];
        if (res.data.data.length>2){
          arr.push(wxparse.html2json(res.data.data[0].content, 'contentdata'));
          arr.push(wxparse.html2json(res.data.data[1].content, 'contentdata'));
          arr.push(wxparse.html2json(res.data.data[2].content, 'contentdata'));
          //console.log(htmllist)
          that.setdata({
            htmllist: arr//记得这里要加入
          });
        }        
        
        wx.hideloading();
      }
    })
  },
  tabclick: function (e) {
    this.setdata({
      slideroffset: e.currenttarget.offsetleft,
      activeindex: e.currenttarget.id
    });
  }
});

  小程序源码:

 https://files.cnblogs.com/files/wyang/yingbaiyou.rar