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

1. pages.josn是页面路由文件
2. tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按照数组的顺序排序
3. color：tab上的文字默认颜色
4. selectedcolor：tab上的文字选中的颜色
5. position：tabbar的位置，默认bottom，可选top
6. fontsize：文字的默认大小
7. list：tab的列表
8. pagepath页面路径，必须子啊pages中先定义
9. text：tab上的按钮文字
10. iconpath：图片路径
11. selectedconpath选择时的图片路径

复制代码

2.消息信息框

代码如下（示例）：

1. alert('这是一个消息弹出框');
2. uni.showToast({
3.              title: '连接失败',
4.                          icon: '/static/message/error.png'
5. });
6. ====================================================
7. uni.showModal({
8.                                 title: '错误提示',
9.                                 content: '连接出现错误，是否重试？',
10.                                 success: function (res) {
11.                                 if (res.confirm) {
12.                                     console.log('用户点击了确定，可能进行重试操作');
13.                                         } else if (res.cancel) {
14.                                         console.log('用户点击了取消');
15.                                         }
16.                                 }
17.                                 });
18. ====================================================
19. uni.showToast({
20.                 title: '这是uni - app的消息提示',
21.                 icon: 'none'
22.             });
23. ====================================================
24. //自定义时间显示 打开遮罩层超时时间结束后关闭遮罩层
25.   showCustomLoading(content,time) {
26.               uni.showLoading({
27.                   title: content
28.               });
29.               setTimeout(() => {
30.                   uni.hideLoading();
31.               }, time); // 单位是毫秒，这里表示5秒后手动隐藏加载提示
32.    },

复制代码

---

3.开关按钮

1. <div id="app">
2.   <div id="lightDiv">
3.     <div v-show="lightOn"></div>
4.     <img src="https://static.jyshare.com/images/svg/img_lightBulb.svg">
5.   </div>
6.   <button v-on:click=" lightOn =! lightOn ">开/关</button>
7. </div>
9. <script>
10. const app = Vue.createApp({
11.   data() {
12.     return {
13.       lightOn: false
14.     }
15.   }
16. })
17. app.mount('#app')
18. </script>

复制代码

4.选中按钮

1. <div id="app">
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
3.   <label for="runoob">Runoob</label>
4.   <br>
5.   <input type="radio" id="google" value="Google" v-model="picked">
6.   <label for="google">Google</label>
7.   <br>
8.   <span>选中值为: {{ picked }}</span>
9. </div>
11. <script>
12. const app = {
13.   data() {
14.     return {
15.       picked : 'Runoob'
16.     }
17.   }
18. }
20. Vue.createApp(app).mount('#app')
21. </script>

复制代码

5.添加图标

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

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

复制代码

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。