h5学习笔记 weui text/template 使用

2024-04-23 06:58

本文主要是介绍h5学习笔记 weui text/template 使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       

昨天开始尝试一下使用这个,之前使用weui的时候,产生一个列表。通过ajax 获取一个数组列表。这个时候,第一次做的时候采用字符串拼凑的方式将字符串拼凑起来,在当时而言这种做法凑效,但相当痛苦。VueJs有模版,但还没有完整采用vue的文件开发。暂时功力不够,看了一下express ejs通过模版引擎可以很方便替换一些变量。有了这个便利后,实际上结合这个提供text/template 模版方式,间接减轻一下在Js 里面拼凑字符串的编写工作。

定义一个

<script  type="text/template">  //在这里添加需要的html代码,就如往常一样</script>
  • 1
  • 2
  • 3
  • 4
<script id="template" type="text/template">     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">          <div class="weui-media-box__hd">                <img class="weui-media-box__thumb" src="<%=pic%>">          </div>          <div class="weui-media-box__bd">                <p><%=title%></p>           </div>     </a></script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这个时候,我们会填写一下变量的关键字。类似<%=title%>,<%=pic%>
这个有参考ejs命名方式。

一会我们需要获取到相应的script信息,把其使用代替相应的变量,这样子我们的列表信息就可以根据数据来源替换对应字段了。

下面总的代码如下“`

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <link href="http://cdn.bootcss.com/weui/1.1.1/style/weui.css" rel="stylesheet">   <title>微信案例</title></head><style>.weui-media-box_appmsg .weui-media-box__hd {    margin-right: .8em;    width: 80px;    line-height: 80px;}.weui-media-box {    padding: 10px;}</style><script id="template" type="text/template">     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">          <div class="weui-media-box__hd">                <img class="weui-media-box__thumb" src="<%=pic%>">          </div>          <div class="weui-media-box__bd">                <p><%=title%></p>           </div>     </a></script><body><div class="weui-panel weui-panel_access">      <div class="weui-panel__hd">体育热点</div>      <div id="panelBody" class="weui-panel__bd">      </div> </div> <script type="text/javascript">  var templateStr  = document.getElementById('template').innerHTML; // console.log(template);  var panelBody = document.getElementById('panelBody');  var array  = [{title:'勇士对太阳',pic:'https://ks.sinaimg.cn/n/sports/transform/20170218/yxCN-fyarrcc7809590.jpg/w120h90z1l50t1657.jpg'},               {title:'骑士对热火',pic:'https://ks.sinaimg.cn/n/sports/transform/20170218/yxCN-fyarrcc7809590.jpg/w120h90z1l50t1657.jpg'}];   var temp = [];  array.forEach(function(element) {      console.log(element);      temp.push(formatHtml(templateStr,element))   }, this);   panelBody.innerHTML = temp.join(',');  //格式化  function formatHtml(str,obj)  {        return str.replace('<%=title%>',obj.title).replace('<%=pic%>',obj.pic);  } </script></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

这篇关于h5学习笔记 weui text/template 使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/928090

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g