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.文件夹说明

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.消息信息框

代码如下（示例）：

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.开关按钮

<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.选中按钮

<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中添加以下语句，加载阿里图标

@import url("/static/font/iconfont.css");

请求的模块“/libs/modbuslibs/node_module…da966”不提供名为“default”的导出

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。