uniapp--HBuilder开发

提示:本文为学习内容,若有错误,请联系作者,谦虚受教。

文章目录


前言

这里记录学习uniapp,使用HBuilder开发过程遇到的问题等等。


一、下载HBuilder

下载HBuilder ,下载地址

二、添加modbus相关库

1.下载nodejs

点击官网下载,下载连接

下载完成后,检查是否下载成功。

win+r 打开cmd命令行,输入 node -v 回车,输入npm -v查看相关版本

2.下载modbus库

下载流程如下:

创建一个空的文件夹如:modbuslibs。

进入 test-echarts 打开命令行工具,执行 npm init 一路回车即可。

下载第三方库:npm install modbus-serial

进入 modbuslibs 目录,里面的文件就是我们需要的第三方库。

下载完成显示:

文件夹内容

3.项目添加modbus库

npm install modbus-serial

三、HBuilder相关功能语句

1.文件夹说明

cpp 复制代码
pages.josn是页面路由文件
tabBar中的list是一个数组,只能配置最少2个,最多5个tab,tab按照数组的顺序排序
color:tab上的文字默认颜色
selectedcolor:tab上的文字选中的颜色
position:tabbar的位置,默认bottom,可选top
fontsize:文字的默认大小
list:tab的列表
pagepath页面路径,必须子啊pages中先定义
text:tab上的按钮文字
iconpath:图片路径
selectedconpath选择时的图片路径

2.消息信息框

代码如下(示例):

c 复制代码
alert('这是一个消息弹出框');
 uni.showToast({
             title: '连接失败',
			 icon: '/static/message/error.png'
});
====================================================
uni.showModal({
				title: '错误提示',
				content: '连接出现错误,是否重试?',
				success: function (res) {
				if (res.confirm) {
				    console.log('用户点击了确定,可能进行重试操作');
					} else if (res.cancel) {
					console.log('用户点击了取消');
					}
				}
				});
====================================================
uni.showToast({
                title: '这是uni - app的消息提示',
                icon: 'none'
            });
====================================================
//自定义时间显示 打开遮罩层超时时间结束后关闭遮罩层
  showCustomLoading(content,time) {
              uni.showLoading({
                  title: content
              });
              setTimeout(() => {
                  uni.hideLoading();
              }, time); // 单位是毫秒,这里表示5秒后手动隐藏加载提示
   },

3.开关按钮

cpp 复制代码
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="https://static.jyshare.com/images/svg/img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开/关</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

4.选中按钮

cpp 复制代码
<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
const app = {
  data() {
    return {
      picked : 'Runoob'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

5.添加图标

加载图标,在使用vue的文件中style中添加以下语句,加载阿里图标

cpp 复制代码
@import url("/static/font/iconfont.css");

请求的模块"/libs/modbuslibs/node_module...da966"不提供名为"default"的导出

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

相关推荐
thigh_d9 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊10 小时前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯10 小时前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码10 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa10 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报10 小时前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app
万岳软件开发小城14 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
anyup1 天前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly212 天前
Uniapp:navigator(页面跳转)
uni-app