阿珊和她的猫

探索uni-app：构建跨平台应用的神奇工具

文章目录

1. 视图容器类组件
- ⚡ ``：视图容器，类似于div元素
- ⚡``：可滚动的视图容器
2. 基础内容类组件
- ⚡``：文本内容，类似于span元素
- ⚡``：图标组件，支持系统图标和自定义图标
3. 表单组件
- ⚡``：输入框组件
- ⚡``：多行文本输入组件</li> </ul> </li> <li>4. 导航组件</li> <li> <ul> <li>⚡ `<navigator>`：页面跳转组件</li> <li>⚡`<tabbar>`：底部选项卡组件</li> </ul> </li> <li>5. 媒体组件</li> <li> <ul> <li>⚡`<image>`：图片内容，用于显示图片</li> <li>⚡`<audio>`：音频播放组件</li> <li>⚡`<video>`：视频播放组件</li> </ul> </li> <li>附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）</li> </ul> </div> <blockquote> 「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级 「个人主页」：阿珊和她的猫 「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️） <ul> <li>Vue.js 和 Egg.js 开发企业级健康管理项目</li> <li>带你从入门到实战全面掌握 uni-app</li> </ul> </blockquote> uni-app 是一个基于 Vue.js 的跨平台开发框架，它可以同时构建运行在多个平台的应用程序，如小程序、H5、App、快应用等 <blockquote> uni-app 内置了一些常用的组件，以下是其中一些常见的内置组件 </blockquote> <h1>1. 视图容器类组件</h1> <h2>⚡ <code><view></code>：视图容器，类似于div元素</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><view></code> 组件创建视图容器： <pre><code class="prism language-html"><template> <view class="container"> <view class="box"> <view class="content"> <text>这是一个视图容器示例</text> </view> </view> </view> </template> <style> .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .box { background-color: #f5f5f5; padding: 20px; } .content { text-align: center; } </style> </code></pre> 在上述示例中，我们使用了 <code><view></code> 组件创建了一个视图容器，并使用了内联样式和类选择器来设置容器的样式。 <ul> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 <code>display: flex</code> 和相关属性将内容居中显示。</li> <li>内层的 <code><view></code> 标签具有 <code>class="box"</code>，设置了容器的背景颜色为 <code>#f5f5f5</code>，并添加了一些内边距。</li> <li><code><text></code> 标签位于最内层的 <code><view></code> 容器中，显示文本内容。</li> </ul> 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。注意，在实际开发中，您需要根据需求来调整样式和布局，以适应您的具体情况。 <h2>⚡<code><scroll-view></code>：可滚动的视图容器</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><scroll-view></code> 组件创建可滚动的视图容器： <pre><code class="prism language-html"><template> <view class="container"> <scroll-view class="scroll-view" scroll-y> <view class="content"> <text v-for="index in 20" :key="index">这是第{{ index }}行文本</text> </view> </scroll-view> </view> </template> <style> .container { width: 100%; height: 100vh; } .scroll-view { height: 100%; } .content { padding: 20px; } </style> </code></pre> 在上述示例中，我们使用了 <code><scroll-view></code> 组件创建了一个可滚动的视图容器，并使用了类选择器来设置容器的样式。 <ul> <li>使用 <code>scroll-y</code> 属性启用垂直滚动。</li> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度）。</li> <li><code><scroll-view></code> 组件具有 <code>class="scroll-view"</code>，设置了容器的高度为100%。</li> <li>内部的 <code><view></code> 标签具有 <code>class="content"</code>，设置了一些内边距。</li> <li><code><text></code> 标签位于最内层的 <code><view></code> 容器中，使用 <code>v-for</code> 循环生成了多行文本内容。</li> </ul> 通过使用 <code><scroll-view></code> 组件，当内容超出容器高度时，用户就可以在垂直方向上滚动视图。 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。请注意，在实际开发中，您需要根据需求来调整样式和布局以适应您的具体情况，并根据实际内容来填充 <code><text></code> 标签中的文本。 <h1>2. 基础内容类组件</h1> <h2>⚡<code><text></code>：文本内容，类似于span元素</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><text></code> 组件来显示文本内容： <pre><code class="prism language-html"><template> <view class="container"> <text class="text">Hello, World!</text> </view> </template> <style> .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .text { font-size: 20px; } </style> </code></pre> 在上述示例中，我们使用了 <code><text></code> 组件来显示文本内容，并使用了类选择器来设置文本的样式。 <ul> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 <code>display: flex</code> 和相关属性将文本内容居中显示。</li> <li><code><text></code> 标签具有 <code>class="text"</code>，设置了文本的字体大小为20px。</li> </ul> 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。注意，在实际应用中，您可以替换 <code><text></code> 标签中的文本内容以显示您想要的具体文本信息，并根据需要调整文本样式。 <h2>⚡<code><icon></code>：图标组件，支持系统图标和自定义图标</h2> 在 uni-app 中，可以使用 <code><uni-icons></code> 组件来实现图标的显示，支持系统图标和自定义图标。 以下是一个示例代码，展示了如何使用 <code><uni-icons></code> 组件显示系统图标和自定义图标： <pre><code class="prism language-html"><template> <view class="container">  <uni-icons name="check" size="32"></uni-icons>  <uni-icons name="my-icon" size="32"></uni-icons> </view> </template> <style scoped> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } </style> <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> export default { components: { 'uni-icons': '@/components/uni-icons/uni-icons' // 请根据实际路径修改引用组件的路径 } }; </script> </code></pre> 在上述示例中，我们通过 <code><uni-icons></code> 组件来显示图标，并传递了一些属性： <ul> <li><code>name</code>：指定要显示的图标名称。对于系统图标，可以使用 Uni-App 官方提供的图标库中的名称，例如 “check” 表示勾选图标；对于自定义图标，可以使用自己定义的图标名称。</li> <li><code>size</code>：指定图标的大小，单位为像素。</li> </ul> 您需要先下载并导入 <code><uni-icons></code> 组件到项目中，然后根据实际路径修改引用组件的路径。注意，自定义图标需要将对应的图标文件放置在项目中，并在 <code><uni-icons></code> 组件中进行相应的配置。 通过上述方式，您可以在 uni-app 中使用 <code><uni-icons></code> 组件来显示系统图标和自定义图标。 <h1>3. 表单组件</h1> <h2>⚡<code><input></code>：输入框组件</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><input></code> 组件创建输入框： <pre><code class="prism language-html"><template> <view class="container"> <input class="input" type="text" placeholder="请输入内容" /> </view> </template> <style> .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .input { width: 200px; height: 40px; border: 1px solid #ccc; padding: 10px; } </style> </code></pre> 在上述示例中，我们使用了 <code><input></code> 组件创建了一个文本输入框，并使用了类选择器来设置输入框的样式。 <ul> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 <code>display: flex</code> 和相关属性将输入框居中显示。</li> <li><code><input></code> 标签具有 <code>class="input"</code>，设置了输入框的宽度为200px、高度为40px，并设置了边框样式、内边距。</li> </ul> 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。该输入框将显示一个占位符文本 “请输入内容”，用户可以在输入框中输入文本内容。根据实际需求，您可以自行调整输入框的样式和属性，例如更改输入框类型、更改占位符文本等。 <h2>⚡<code><textarea></code>：多行文本输入组件</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><textarea></code> 组件创建多行文本输入框： <pre><code class="prism language-html"><template> <view class="container"> <textarea class="textarea" placeholder="请输入内容"></textarea> </view> </template> <style> .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .textarea { width: 200px; height: 100px; border: 1px solid #ccc; padding: 10px; } </style> </code></pre> 在上述示例中，我们使用了 <code><textarea></code> 组件创建了一个多行文本输入框，并使用了类选择器来设置输入框的样式。 <ul> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 <code>display: flex</code> 和相关属性将多行文本输入框居中显示。</li> <li><code><textarea></code> 标签具有 <code>class="textarea"</code>，设置了多行文本输入框的宽度为200px、高度为100px，并设置了边框样式、内边距。</li> </ul> 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。该多行文本输入框将显示一个占位符文本 “请输入内容”，用户可以在输入框中输入多行文本内容。根据实际需求，您可以自行调整输入框的样式和属性，例如更改占位符文本、设置最大长度等。 <blockquote> 其他表单组件（感兴趣可以在官网进行查阅） </blockquote> <ul> <li><code><button></code>：按钮组件</li> <li><code><checkbox></code>：复选框组件</li> <li><code><radio></code>：单选框组件</li> <li><code><switch></code>：开关组件</li> </ul> <h1>4. 导航组件</h1> <h2>⚡ <code><navigator></code>：页面跳转组件</h2> 在 uni-app 中，可以使用 <code><navigator></code> 组件进行页面跳转。<code><navigator></code> 组件可以实现在小程序和 APP 端的页面间跳转，并支持跳转传参、打开新页面等功能。 以下是一个示例代码，展示了如何使用 <code><navigator></code> 组件进行页面跳转： <pre><code class="prism language-html"><template> <view class="container">  <navigator url="/pages/targetPage"></navigator>  <navigator url="/pages/targetPage?id=123&name=John"></navigator>  <navigator url="/pages/targetPage" open-type="navigate"></navigator> </view> </template> <style scoped> .container { width: 100%; height: 100vh; } </style> <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> export default {}; </script> </code></pre> 在上述示例中，我们使用 <code><navigator></code> 组件来实现页面跳转，并传递了一些属性： <ul> <li><code>url</code>：指定要跳转的目标页面路径。需要根据实际情况修改为目标页面的路径，例如 “/pages/targetPage”。</li> <li><code>open-type</code>：指定打开方式。默认为 “navigate”，表示在当前页面内打开目标页面；如果设置为 “navigate”，则会在新的窗口中打开目标页面。</li> </ul> 您需要根据实际情况修改跳转目标的路径，并可根据需要传递参数。请注意，在使用 <code><navigator></code> 组件进行页面跳转时，需要提前配置好目标页面的路由信息。 通过上述方式，您可以在 uni-app 中使用 <code><navigator></code> 组件进行页面跳转，并根据需要传递参数、打开新页面等。 <h2>⚡<code><tabbar></code>：底部选项卡组件</h2> 在 uni-app 中，可以使用 <code><tabbar></code> 组件创建底部选项卡，用于在不同页面之间进行切换。<code><tabbar></code> 组件可以帮助您实现底部导航栏的功能。 以下是一个示例代码，展示了如何使用 <code><tabbar></code> 组件创建底部选项卡： <pre><code class="prism language-html"><template> <view class="container"> <tabbar>  <tabbar-item icon="home" text="首页" url="/pages/home"></tabbar-item> <tabbar-item icon="discover" text="发现" url="/pages/discover"></tabbar-item> <tabbar-item icon="profile" text="个人" url="/pages/profile"></tabbar-item> </tabbar>  <view class="content">  </view> </view> </template> <style scoped> .container { width: 100%; height: 100vh; } .content { flex-grow: 1; } </style> <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> export default {}; </script> </code></pre> 在上述示例中，我们使用 <code><tabbar></code> 组件来创建底部选项卡，并配置了三个选项卡项： <ul> <li><code><tabbar-item></code>：每个选项卡项对应一个 <code><tabbar-item></code> 组件。 <ul> <li><code>icon</code>：指定选项卡的图标。可以使用 Uni-App 官方提供的图标库中的名称，例如 “home” 表示首页图标。</li> <li><code>text</code>：指定选项卡的文本。</li> <li><code>url</code>：指定选项卡点击后跳转的页面路径。需要根据实际情况修改为目标页面的路径，例如 “/pages/home”。</li> </ul> </li> </ul> 您可以根据需要配置更多选项卡项，并在每个选项卡项中设置图标、文本和跳转路径。 通过上述方式，您可以在 uni-app 中使用 <code><tabbar></code> 组件创建底部选项卡，实现页面间的切换。请注意，在创建选项卡时，需要提前配置对应页面的路由信息。 <h1>5. 媒体组件</h1> <h2>⚡<code><image></code>：图片内容，用于显示图片</h2> 以下是一个简单的 uni-app 代码示例，展示了如何使用 <code><image></code> 组件来显示图片内容： <pre><code class="prism language-html"><template> <view class="container"> <image class="image" src="../assets/image.jpg"></image> </view> </template> <style> .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .image { width: 200px; height: 200px; } </style> </code></pre> 在上述示例中，我们使用了 <code><image></code> 组件来显示图片内容，并使用了类选择器来设置图片的样式。 <ul> <li>外层的 <code><view></code> 标签具有 <code>class="container"</code>，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 <code>display: flex</code> 和相关属性将图片内容居中显示。</li> <li><code><image></code> 标签具有 <code>class="image"</code>，设置了图片的宽度为200px、高度为200px。</li> <li>图片的路径使用 <code>src</code> 属性指定，这里的路径假设为 <code>../assets/image.jpg</code>，您可以根据实际情况替换为您项目中的图片路径。</li> </ul> 您可以将以上代码复制到您的 uni-app 项目中的页面文件中，并将实际的图片路径指定给 <code>src</code> 属性，然后查看效果。请确保图片存在于指定的路径中，并根据需要调整图片的大小和容器的样式。 <h2>⚡<code><audio></code>：音频播放组件</h2> 在 uni-app 中，可以使用 <code><audio></code> 组件来实现音频的播放功能。<code><audio></code> 组件是用于在页面中嵌入音频内容的标签。 以下是一个示例代码，展示了如何使用 <code><audio></code> 组件播放音频： <pre><code class="prism language-html"><template> <view class="container"> <view class="controls">  <button @tap="playAudio">播放</button>  <button @tap="pauseAudio">暂停</button> </view>  <audio :src="audioUrl" :id="audioId" :loop="loop" @ended="audioEnded"></audio> </view> </template> <style scoped> .container { width: 100%; height: 100vh; } .controls { margin-top: 20px; } </style> <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> export default { data() { return { audioUrl: 'https://example.com/audio.mp3', // 音频文件的 URL audioId: 'my-audio', // 音频组件的 ID loop: false // 是否循环播放 }; }, methods: { playAudio() { // 播放音频 uni.createSelectorQuery().select('#' + this.audioId).fields({ context: true }, (res) => { if (res) { res.context.play(); } }).exec(); }, pauseAudio() { // 暂停音频 uni.createSelectorQuery().select('#' + this.audioId).fields({ context: true }, (res) => { if (res) { res.context.pause(); } }).exec(); }, audioEnded() { // 音频播放结束时的回调函数 console.log('音频播放结束'); } } }; </script> </code></pre> 在上述示例中，我们使用 <code><audio></code> 组件来播放音频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下： <ol> <li>在 <code>data</code> 中定义音频文件的 URL，可以将其替换为实际的音频文件 URL。</li> <li>在 <code><audio></code> 组件中使用 <code>:src</code> 绑定音频文件的 URL，使用 <code>:id</code> 绑定音频组件的 ID，使用 <code>:loop</code> 绑定是否循环播放。</li> <li>在按钮的点击事件处理方法中，使用 <code>uni.createSelectorQuery()</code> 方法获取音频组件的上下文对象，并调用 <code>play()</code> 方法来播放音频，或者调用 <code>pause()</code> 方法来暂停音频。</li> <li>在 <code><audio></code> 组件上添加 <code>@ended</code> 事件监听器，当音频播放结束时，会触发 <code>audioEnded</code> 方法。</li> </ol> 通过上述方式，您可以在 uni-app 中使用 <code><audio></code> 组件来实现音频的播放功能，并控制音频的播放和暂停。请注意，音频文件需要提前准备好并提供正确的 URL。 <h2>⚡<code><video></code>：视频播放组件</h2> 在 uni-app 中，可以使用 <code><video></code> 组件来实现视频的播放功能。<code><video></code> 组件是用于在页面中嵌入视频内容的标签。 以下是一个示例代码，展示了如何使用 <code><video></code> 组件播放视频： <pre><code class="prism language-html"><template> <view class="container"> <view class="controls">  <button @tap="playVideo">播放</button>  <button @tap="pauseVideo">暂停</button> </view>  <video :src="videoUrl" :id="videoId" :poster="posterUrl" :autoplay="autoplay" :controls="controls" @ended="videoEnded"></video> </view> </template> <style scoped> .container { width: 100%; height: 100vh; } .controls { margin-top: 20px; } </style> <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> export default { data() { return { videoUrl: 'https://example.com/video.mp4', // 视频文件的 URL posterUrl: 'https://example.com/poster.jpg', // 视频封面图片的 URL videoId: 'my-video', // 视频组件的 ID autoplay: false, // 是否自动播放 controls: true // 是否显示控制条 }; }, methods: { playVideo() { // 播放视频 uni.createSelectorQuery().select('#' + this.videoId).fields({ context: true }, (res) => { if (res) { res.context.play(); } }).exec(); }, pauseVideo() { // 暂停视频 uni.createSelectorQuery().select('#' + this.videoId).fields({ context: true }, (res) => { if (res) { res.context.pause(); } }).exec(); }, videoEnded() { // 视频播放结束时的回调函数 console.log('视频播放结束'); } } }; </script> </code></pre> 在上述示例中，我们使用 <code><video></code> 组件来播放视频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下： <ol> <li>在 <code>data</code> 中定义视频文件的 URL、视频封面图片的 URL，可以将其替换为实际的视频文件 URL 和封面图片 URL。</li> <li>在 <code><video></code> 组件中使用 <code>:src</code> 绑定视频文件的 URL，使用 <code>:id</code> 绑定视频组件的 ID，使用 <code>:poster</code> 绑定视频封面图片的 URL，使用 <code>:autoplay</code> 绑定是否自动播放，使用 <code>:controls</code> 绑定是否显示控制条。</li> <li>在按钮的点击事件处理方法中，使用 <code>uni.createSelectorQuery()</code> 方法获取视频组件的上下文对象，并调用 <code>play()</code> 方法来播放视频，或者调用 <code>pause()</code> 方法来暂停视频。</li> <li>在 <code><video></code> 组件上添加 <code>@ended</code> 事件监听器，当视频播放结束时，会触发 <code>videoEnded</code> 方法。</li> </ol> 通过上述方式，您可以在 uni-app 中使用 <code><video></code> 组件来实现视频的播放功能，并控制视频的播放和暂停。请注意，视频文件和封面图片需要提前准备好并提供正确的 URL。 这只是 uni-app 内置组件的一小部分，还有许多其他组件可用于开发跨平台应用程序 您可以查阅官方文档以了解更多关于内置组件和其使用的详细信息：uni-app官方文档 <h1>附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）</h1> Vue.js 和 Egg.js 开发企业级健康管理项目 带你从入门到实战全面掌握 uni-app </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1679836266499223552"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(uni-app)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1834768522685804544.htm" title="uni-app开发微信小程序" target="_blank">uni-app开发微信小程序</a> hong161688 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超</div> </li> <li><a href="/article/1834756301549301760.htm" title="使用 uni-app 开发微信小程序：深入教程与技巧" target="_blank">使用 uni-app 开发微信小程序：深入教程与技巧</a> 代码伐木匠 <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a> <div>使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭</div> </li> <li><a href="/article/1834610822148616192.htm" title="Uni-app 开发微信小程序" target="_blank">Uni-app 开发微信小程序</a> vvvae1234 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套</div> </li> <li><a href="/article/1834480753681985536.htm" title="cross-plateform 跨平台应用程序-06-uni-app 介绍" target="_blank">cross-plateform 跨平台应用程序-06-uni-app 介绍</a> 知识分享官 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js</div> </li> <li><a href="/article/1834431095655985152.htm" title="uni-app获取设备唯一值、静态IP以及公网IP的方法" target="_blank">uni-app获取设备唯一值、静态IP以及公网IP的方法</a> [廾匸] <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/ip/1.htm">ip</a><a class="tag" taget="_blank" href="/search/IMEI/1.htm">IMEI</a><a class="tag" taget="_blank" href="/search/%E5%94%AF%E4%B8%80%E5%80%BC/1.htm">唯一值</a> <div>最近开发uniapp的时候，想要获取设备的唯一值作为绑定设备的序列号，还有手动设置的IP以及联网后的公网ip，在插件市场找到一个插件，非常适合，链接如下：lrw-getip-getid，特意在此记录一下，方便以后用得到</div> </li> <li><a href="/article/1834151623425880064.htm" title="Uni-app 开发鸿蒙 App 全攻略" target="_blank">Uni-app 开发鸿蒙 App 全攻略</a> 老三不说话、 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a> <div>一、开发前的准备工作开发鸿蒙App之前，我们需要做好充分的准备工作。首先是工具的安装与配置。Node.js的安装：推荐使用LTS版本的Node.js。可以前往Node.js的官方网站下载适合自己操作系统的安装包，如Windows用户根据自己的系统版本选择32位或64位版本。安装过程较为简单，只需按照安装向导一步步进行操作，同意许可协议，选择安装位置即可。安装完成后，可以使用命令行工具（如Power</div> </li> <li><a href="/article/1834147716041633792.htm" title="从学习vue到uni-app的心得感悟" target="_blank">从学习vue到uni-app的心得感悟</a> crazy_章鱼哥 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、</div> </li> <li><a href="/article/1833958005645864960.htm" title="【uni-app】1 uniapp介绍 & 使用 + 小程序实时获取视频播放时间" target="_blank">【uni-app】1 uniapp介绍 & 使用 + 小程序实时获取视频播放时间</a> 疾风小蜗牛 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>文章目录一、uni-app介绍1、诞生背景2、uni-app是什么（what、where）3、uni-app的优势（why）4、uni-app的功能框架图二、使用uni-app（how）1、下载安装&创建项目2、多端运行3、uni-app操作三、其他微信小程序实时获取视频播放时间（秒）一、uni-app介绍1、诞生背景多端泛滥。现在是一个多端泛滥的时代，用户被分散到了各个平台，随着微信小程序的兴起</div> </li> <li><a href="/article/1833955606306844672.htm" title="uni-app +vue+微信小程序发布线上" target="_blank">uni-app +vue+微信小程序发布线上</a> 快乐的高兴的学习代码中 <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>通过HBuilderx里写uni-app语言和vue来做微信小程序,在微信开发者工具里来看效果图发布步骤：1.先在HBuildeX开发工具--找到导航栏里的发行---再选择小程序微信（仅适用于uni-app）2.在微信开发者工具，运行小程序后，找到导航栏的上传上传那里会出现一个提示框，可以在那里写项目备注上传成功后会有提示3.打开微信开发者工具微信公众平台，登录相关账号，选择版本管理</div> </li> <li><a href="/article/1833941232175378432.htm" title="uni-app怎么用？和vue对比记忆一文教会你" target="_blank">uni-app怎么用？和vue对比记忆一文教会你</a> 没有技巧只有感情 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>这篇文章记录了我学习uni-app以及在项目中使用uni-app过程中所总结的笔记，以这篇文章记录下来，供你们和我自己对uni-app进行整体的复习和巩固，下面主要将uni-app和vue进行对比记忆，巩固uni-app用法，同时总结了多个uni-app的api使用场景1、首先对比uni-app与vue，从以下几点介绍uni-app和vue的区别：1、目录不同2、对页面之间跳转的路由配置不同3、页</div> </li> <li><a href="/article/1833514974358630400.htm" title="uni-app前端post请求数据json序列化解决" target="_blank">uni-app前端post请求数据json序列化解决</a> 标准形与二次型 <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E9%94%99/1.htm">报错</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>问题：前端使用uni-app的uni.request发送post请求时，携带data参数会被json序列化对于POST方法且header[‘content-type’]为application/json的数据，会进行JSON序列化。官方文档这就导致我写好的登录页面，传递用户名和密码，使用postman可以正常请求，但前端页面发送post请求则会报错：Requiredrequestparameter</div> </li> <li><a href="/article/1832363909147881472.htm" title="[uni-app]Pinia持久化" target="_blank">[uni-app]Pinia持久化</a> [盐鱼]小白前端日记 <a class="tag" taget="_blank" href="/search/uni-app%E5%AD%A6%E4%B9%A0/1.htm">uni-app学习</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>前言开发小程序的Pinia持久化和网页端的Pinia持久化的方法较为相似，唯一的区别在于：网页端持久化使用的是localStorage.setItem()和localStorage.getItem()而小程序持久化使用的是uni.setStorageSync()和uni.getStorageSync()一、pinia的定义导出在实际开发时一般会创建一个stores文件夹来存储公共库如vuex或者是</div> </li> <li><a href="/article/1832200073442848768.htm" title="uniapp 隐藏滚动条" target="_blank">uniapp 隐藏滚动条</a> 追逐繁星的阿忠 <div>2020-11-14//在page.json{"pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path":"pages/index/index","style":{"navigationBarTitleText":"uni-app","app-plus":{"scrollIndicator":</div> </li> <li><a href="/article/1831794859120357376.htm" title="vue-cli创建uni-app引入uni-ui" target="_blank">vue-cli创建uni-app引入uni-ui</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue-cli/1.htm">vue-cli</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1.全局安装脚手架npminstall-g@vue/cli2.创建uni-app项目vuecreate-pdcloudio/uni-preset-vuemy-project3.引入uni-ui框架//安装node-sassnpminode-sass-D//安装sass-loadernpmisass-loader-D安装方式：npm安装npminstalluview-ui4.在pages.json文</div> </li> <li><a href="/article/1831778979892260864.htm" title="uni-app技术分享|开源demo视频呼叫arcall uni-app端技术实现" target="_blank">uni-app技术分享|开源demo视频呼叫arcall uni-app端技术实现</a> anyRTC <a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/uni-app%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/1.htm">uni-app技术分享</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E9%80%9A%E8%AF%9D/1.htm">视频通话</a><a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/%E5%91%BC%E5%8F%AB%E9%82%80%E8%AF%B7/1.htm">呼叫邀请</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E9%80%9A%E8%AF%9D/1.htm">视频通话</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>介绍基本uniapp_arcall是通过uniapp实现的语音通话、视频通话以及相关配套的呼叫邀请。解决向指定用户发起呼叫通知，对方接受后进行通话的场景需求。呼叫邀请基本流程</div> </li> <li><a href="/article/1831772047584358400.htm" title="uni-app全局引入js文件" target="_blank">uni-app全局引入js文件</a> 小凳子在线 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>js文件定义对于js文件内方法的编写，可以采用以下两种形式，两种形式对应两种不同的文件引入：constshowToast={test:function(){console.log("测试2")}}exportdefaultshowToast引入：importshowToastfrom'./utils/toast'functiontest(){console.log("测试")}export{tes</div> </li> <li><a href="/article/1831752251467722752.htm" title="uni-app基础框架搭建（vue3+ts+vite）" target="_blank">uni-app基础框架搭建（vue3+ts+vite）</a> LB_bei <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>1.基础准备uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创https://uniapp.dcloud.net.cn/quicks</div> </li> <li><a href="/article/1831390951277424640.htm" title="其他面试题" target="_blank">其他面试题</a> 奈何我是个菜鸡 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>uni-app面试题一、生命周期应用生命周期、页面生命周期、组件生命周期二、条件编译在工具中，打if出现的条件编译例如：这是h5端性能优化面试题一、加载优化1.http请求能不能减少（能不能合并）2.图片的雪碧图3.script标签位置4.link标签（css引入）二、图片优化1.图片懒加载2.响应式图片3.webp代替其他格式4.小图标可以改用字体图标三、渲染优化1.减少重绘和回流2.</div> </li> <li><a href="/article/1831331718854963200.htm" title="uni-app目录结构" target="_blank">uni-app目录结构</a> magic33416563 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/1.htm">目录结构</a> <div>一个uni-app工程，默认包含如下目录及文件：┌─componentsuni-app组件目录│└─comp-a.vue可复用的a组件├─hybrid存放本地网页的目录，详见├─platforms存放各平台专用页面的目录，详见├─pages业务页面文件存放的目录│├─index││└─index.vueindex页面│└─list│└─list.vuelist页面├─static存放应用引用静态资</div> </li> <li><a href="/article/1831317726426132480.htm" title="vue,小程序,uni-app的生命周期" target="_blank">vue,小程序,uni-app的生命周期</a> 小鼠米奇 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>在Web开发、小程序开发以及使用uni-app进行跨平台开发时，理解各个框架或平台的生命周期是非常重要的。这些生命周期钩子允许开发者在组件或应用的特定阶段执行代码，比如初始化、显示、隐藏、销毁等。下面分别介绍Vue、小程序和uni-app的生命周期。Vue的生命周期Vue的生命周期主要指的是Vue实例从创建到销毁的一系列过程。这些过程包括：beforeCreate：在实例初始化之后，数据观测(da</div> </li> <li><a href="/article/1831312307712520192.htm" title="uniapp图片上传，加web core api接收并保存" target="_blank">uniapp图片上传，加web core api接收并保存</a> 浮生若森 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>Uni-App图片上传加后台webcoreApi前台代码后台WebCoreApi代码Startup.cs中代码啥也不说了直接上代码！！！前台代码//Anhighlightedblockuni.chooseImage({count:1,success:(res)=>{uni.uploadFile({url:'http://localhost:24517/api/Upload/UpImgs',file</div> </li> <li><a href="/article/1831310918479343616.htm" title="微信小程序开发中的流数据处理和兼容性问题(TextDecoder微信小程序未定义),真机和开发者环境返回对象不一致" target="_blank">微信小程序开发中的流数据处理和兼容性问题(TextDecoder微信小程序未定义),真机和开发者环境返回对象不一致</a> 枫斗. <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发中的流数据处理和兼容性问题摘要在微信小程序开发中，处理流数据是常见的需求，但开发者可能会遇到一些兼容性和数据类型处理的问题。本文将探讨两个主要问题：1)TextDecoder在微信小程序中的不兼容性；2)开发者工具与真机环境下数据对象类型的差异。问题一：TextDecoder的兼容性问题问题描述在uni-app框架中，使用TextDecoder对象来解码Uint8Array或Arra</div> </li> <li><a href="/article/1831309782175281152.htm" title="uni-app支持pdf流加载显示" target="_blank">uni-app支持pdf流加载显示</a> 辰歌淺落 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8F%92%E4%BB%B6/1.htm">前端插件</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>第一步：下载源码第二步：构建PDF.js第三步：修改viewer.jsvarDEFAULT_URL='compressed.tracemonkey-pldi-09.pdf'里面是PDF的路径删除该变量定义;第四步：通过ajax的方式获取文件流数据，并处理。varDEFAULT_URL="";//注意，删除的变量在这里重新定义varPDFData="";$.ajax({type:"post",asy</div> </li> <li><a href="/article/1831268329407475712.htm" title="uni-app启动本地开发环境，修改默认端口号" target="_blank">uni-app启动本地开发环境，修改默认端口号</a> 徐同保 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>vite.config.js:import{defineConfig}from"vite";importunifrom"@dcloudio/vite-plugin-uni";//https://vitejs.dev/config/exportdefaultdefineConfig({server:{port:3006,},plugins:[uni()],});人工智能学习网站https://cha</div> </li> <li><a href="/article/1831001461610344448.htm" title="vue , 微信小程序 , uni-app绑定变量属性" target="_blank">vue , 微信小程序 , uni-app绑定变量属性</a> 小鼠米奇 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>在Vue、微信小程序和uni-app中，绑定变量属性是常见的需求，用于实现数据的动态展示和交互。这些框架或平台都提供了各自的方式来绑定变量属性。下面分别介绍它们如何做到这一点。Vue在Vue中，你可以使用v-bind指令（或其缩写:）来绑定HTML属性到表达式。这允许你将JavaScript变量或表达式的值动态地绑定到HTML元素的属性上。示例：Hello,Vue!exportdefault{da</div> </li> <li><a href="/article/1830232207873110016.htm" title="uniapp使用 uview-plus 底部导航栏(vue3项目)" target="_blank">uniapp使用 uview-plus 底部导航栏(vue3项目)</a> 奔跑的露西 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前提：项目中已引入uview-plus，具体可查看uview-plus官网Tabbar底部导航栏网站：Tabbar底部导航栏|uview-plus3.0-全面兼容nvue的uni-app生态框架-uni-appUI框架✍完整代码地址：front-mini-programe/components/tabbar/tabbar.vue·cheinlu/土拨鼠充电系统-Gitee.com一、先在compo</div> </li> <li><a href="/article/1830214561249193984.htm" title="uniapp尺寸单位 px转rpx" target="_blank">uniapp尺寸单位 px转rpx</a> 万能螺丝刀1 <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a> <div>uniapp尺寸单位uni-app支持的通用css单位包括px、rpxpx即屏幕像素rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照375px的屏幕宽度进行计算，具体配置参考：rpx计算配置。rpx计算配置uni-app屏幕基准宽度uni-app规</div> </li> <li><a href="/article/1830201580259995648.htm" title="uni-app 签名（横屏）H5 微信小程序可用" target="_blank">uni-app 签名（横屏）H5 微信小程序可用</a> yuehua_zhang <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> {{prompt}} 保存清除关闭 constapp=getApp(); exportdefault{ data(){ return{ </div> </li> <li><a href="/article/1830200824656130048.htm" title="uni-app，关于 canvas 在 app，小程序， h5中，实现绘制，保存本地图片" target="_blank">uni-app，关于 canvas 在 app，小程序， h5中，实现绘制，保存本地图片</a> 前端小袁 <a class="tag" taget="_blank" href="/search/H5/1.htm">H5</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>没有套路，没有难读的文档，直接看代码html部分绘制canvas保存到本地js部分exportdefault{data(){return{textCanvas:null,//初始化canvas值}},methods:{//绘制canvasdrawCanvas(){//指定this的指向letthat=this;//uni-app中，不管是小程序，app，h5在获取元素实例时，都是统一的方法,只要获</div> </li> <li><a href="/article/1830193883796041728.htm" title="Canvas 在微信小程序-uni-APP 和 H5 中的使用差异" target="_blank">Canvas 在微信小程序-uni-APP 和 H5 中的使用差异</a> xjt_0901 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Canvas是一个强大的绘图工具,无论是在Web开发还是跨平台应用开发中都有广泛应用。然而,在uni-APP和传统H5环境中使用Canvas时,存在一些重要的差异。本文将深入探讨这些差异,帮助开发者在不同平台上更好地使用Canvas。1.API差异H5环境在H5环境中,我们使用标准的WebAPI来操作Canvas:constcanvas=document.getElementById('myCan</div> </li> <li><a href="/article/39.htm" title="java Illegal overloaded getter method with ambiguous type for propert的解决" target="_blank">java Illegal overloaded getter method with ambiguous type for propert的解决</a> zwllxs <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，</div> </li> <li><a href="/article/166.htm" title="IT人应当知道的10个行业小内幕" target="_blank">IT人应当知道的10个行业小内幕</a> beijingjava <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a> <div>10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配</div> </li> <li><a href="/article/293.htm" title="java 实现自定义链表" target="_blank">java 实现自定义链表</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.链表结构链表是链式的结构 2.链表的组成链表是由头节点，中间节点和尾节点组成节点是由两个部分组成： 1.数据域 2.引用域 3.链表的实现 &nbs</div> </li> <li><a href="/article/420.htm" title="web项目发布到服务器后图片过一会儿消失" target="_blank">web项目发布到服务器后图片过一会儿消失</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/1.htm">上传图片</a><a class="tag" taget="_blank" href="/search/%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98/1.htm">永久保存</a> <div> 作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片</div> </li> <li><a href="/article/547.htm" title="CodeIgniter框架Cart类 name 不能设置中文的解决方法" target="_blank">CodeIgniter框架Cart类 name 不能设置中文的解决方法</a> IT独行者 <a class="tag" taget="_blank" href="/search/CodeIgniter/1.htm">CodeIgniter</a><a class="tag" taget="_blank" href="/search/Cart/1.htm">Cart</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6%E3%80%80/1.htm">框架　</a> <div>今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '</div> </li> <li><a href="/article/674.htm" title="linux回收站" target="_blank">linux回收站</a> _wy_ <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%9E%E6%94%B6%E7%AB%99/1.htm">回收站</a> <div>今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在</div> </li> <li><a href="/article/801.htm" title="jquery回到页面顶端" target="_blank">jquery回到页面顶端</a> 知了ing <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <a href="#anchor" class="topLink">回到顶端</a><</div> </li> <li><a href="/article/928.htm" title="B树、B-树、B+树、B*树" target="_blank">B树、B-树、B+树、B*树</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/B%E6%A0%91/1.htm">B树</a> <div>原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树即二叉搜索树： 1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb</div> </li> <li><a href="/article/1055.htm" title="数据库连接池" target="_blank">数据库连接池</a> alafqq <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a> <div>http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼数据库连接池用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec</div> </li> <li><a href="/article/1182.htm" title="java泛型" target="_blank">java泛型</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java%E6%B3%9B%E5%9E%8B/1.htm">java泛型</a> <div>泛型在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患泛型的特点：消除强制转换确保类型安全向后兼容简单泛型的定义：泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan</div> </li> <li><a href="/article/1309.htm" title="javascript闭包[两个小测试例子]" target="_blank">javascript闭包[两个小测试例子]</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　</div> </li> <li><a href="/article/1436.htm" title="探索JUnit4扩展：假设机制（Assumption）" target="_blank">探索JUnit4扩展：假设机制（Assumption）</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Assumption/1.htm">Assumption</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.假设机制（Assumption）概述理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，</div> </li> <li><a href="/article/1563.htm" title="【Gson四】范型POJO的反序列化" target="_blank">【Gson四】范型POJO的反序列化</a> bit1129 <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO import com.google.gson.Gson; import java.</div> </li> <li><a href="/article/1690.htm" title="【Spark八十五】Spark Streaming分析结果落地到MySQL" target="_blank">【Spark八十五】Spark Streaming分析结果落地到MySQL</a> bit1129 <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，</div> </li> <li><a href="/article/1817.htm" title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a> <div>安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma</div> </li> <li><a href="/article/1944.htm" title="java-递归判断数组是否升序" target="_blank">java-递归判断数组是否升序</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv</div> </li> <li><a href="/article/2071.htm" title="Netty源码学习-DefaultChannelPipeline2" target="_blank">Netty源码学习-DefaultChannelPipeline2</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”：如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB）来</div> </li> <li><a href="/article/2198.htm" title="Java工具之JPS" target="_blank">Java工具之JPS</a> chinrui <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>JPS使用熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来</div> </li> <li><a href="/article/2325.htm" title="window.print分页打印" target="_blank">window.print分页打印</a> ctrain <a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div> function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) { </div> </li> <li><a href="/article/2452.htm" title="安装hadoop时执行jps命令Error occurred during initialization of VM" target="_blank">安装hadoop时执行jps命令Error occurred during initialization of VM</a> daizj <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>在安装hadoop时，执行JPS出现下面错误 [slave16]root@192.168.11.10:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working</div> </li> <li><a href="/article/2579.htm" title="PHP开发大型项目的一点经验" target="_blank">PHP开发大型项目的一点经验</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div>一、变量最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十</div> </li> <li><a href="/article/2706.htm" title="android笔记之--向网络发送GET/POST请求参数" target="_blank">android笔记之--向网络发送GET/POST请求参数</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi</div> </li> <li><a href="/article/2833.htm" title="linux复习笔记之bash shell (3) 通配符" target="_blank">linux复习笔记之bash shell (3) 通配符</a> eksliang <a class="tag" taget="_blank" href="/search/linux+%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux 通配符</a><a class="tag" taget="_blank" href="/search/linux%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux通配符</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。下面列出一些常用的通配符，如下表所示符号意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c</div> </li> <li><a href="/article/2960.htm" title="Android关于短信加密" target="_blank">Android关于短信加密</a> gqdy365 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）： 1、因为Android有短信收发接口，可以调用接口完成短信收发；发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm</div> </li> <li><a href="/article/3087.htm" title="asp.net在网站根目录下创建文件夹" target="_blank">asp.net在网站根目录下创建文件夹</a> hvt <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a> <div>假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D</div> </li> <li><a href="/article/3214.htm" title="一个合格的程序员应该读过哪些书" target="_blank">一个合格的程序员应该读过哪些书</a> justjavac <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E4%B9%A6%E7%B1%8D/1.htm">书籍</a> <div>编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本，你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。以前就有国内网友介绍这个程序员书单，不过都是推荐数</div> </li> <li><a href="/article/3341.htm" title="单实例实践" target="_blank">单实例实践</a> 跑龙套_az <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a> <div> 1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes</div> </li> <li><a href="/article/3468.htm" title="PO VO BEAN 理解" target="_blank">PO VO BEAN 理解</a> q137681467 <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/DTO/1.htm">DTO</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a> <div>PO：全称是 persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。 BO：全称是 business object:业务对象主要作用是把业务逻辑封装为一个对象。这个对</div> </li> <li><a href="/article/3595.htm" title="战胜惰性，暗自努力" target="_blank">战胜惰性，暗自努力</a> 金笛子 <a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B/1.htm">努力</a> <div>偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？我有个朋友是搞技术的，平时嘻嘻哈哈，以</div> </li> <li><a href="/article/3722.htm" title="NDK/JNI二维数组多维数组传递" target="_blank">NDK/JNI二维数组多维数组传递</a> wenzongliang <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a><a class="tag" taget="_blank" href="/search/NDK/1.htm">NDK</a> <div>多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>