# 一、開通內網穿透
>[danger] 必須開通內網穿透才可使用微信小程序功能,否則無法控制插件,我們插件的小程序頁面通信是通過web的
開通內網穿透請參考文檔[開通內網穿透](http://docs.16302.com/2991570)
# 二、文件夾結構

```
helloworld
├── config.json # 插件配置文件
├── helloworld.py # 系統插件主文件
└── vue # 小程序文件夾
└── index.vue # 小程序主文件
```
>[info] 從目錄結構上來看只需要新增一個名稱為vue的文件夾并創建一個index.vue小程序主文件即可
<br>
# 三、微信小程序規范
>[success] 我們的小程序適用于消息機制,在自美系統中可以看成一個插件模塊,語法規則使用的是微信小程序官方語法規則,包括小程序框架等,詳細資料請查閱 [微信開放文檔 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/framework/)
>[warning] 消息機制相關知識請參考 [插件的消息機制](http://docs.16302.com/2987119) 文檔
>[success] 我們的小程序框架已經內置了[Element前端框架](https://element.eleme.cn/#/zh-CN)
開發者可以自由定義各項按鈕及功能

>[success] 微信小程序開發語法上,使用的是[Vue.js (vuejs.org)](https://cn.vuejs.org/) 使用的是2.x版本
有功能需求的請前往vue.js的官網自行學習

# 四、小程序代碼樣例
>[info] 在小程序開發者工具中,小程序頁面被分為了`index.wxml index.scss index.wxs`三個主要文件,通過這三個文件渲染出界面并執行頁面功能。
>[warning] 本質上微信小程序與普通的HTML5區別不大,最終都會導入到主文件進程中來。而我們的小程序頁面使用的是集成方式的,即是把三個主要文件在一個文件 `index.vue` 中編寫。
`index.vue`文件結構框架
```html
<template>
... // 頁面組件
</template>
<script>
... // 頁面執行的功能
</script>
<style>
... // 頁面樣式表
</style>
```
## index.vue文件結構細分
`Template`部分
```html
<template>
<el-row :gutter="10" class="page-set">
<div class="top-space"></div>
<div class="top-name">你好,歡迎使用自美智能物聯網系統</div>
<div class="top-text">當前連接正常</div>
<el-row>
<el-col :span="8"><div class="grid-content"></div></el-col>
<el-col :span="8"><div class="grid-content">
<el-button type="primary" plain @click="hello_text">Hello World</el-button>
</div></el-col>
<el-col :span="8"><div class="grid-content"></div></el-col>
</el-row>
</el-row>
</template>
```
<br>
`JavaScript`部分
```JavaScript
<script>
module.exports = {
data() {
return {
};
},
created() {
// 在style.display = 'none' 以移除開發調試欄
var _this = this;
document.getElementById("topmenu").style.display = "none";},
methods: {
hello_text() {
self.send({
MsgType: "Text",
Receiver: "Screen",
Data: "我收到消息了哦",
});
}
},
};
</script>
```
<br>
`style`樣式表部分
```
<style>
html,body {
background-color: #ffffff;
margin: 0;
border: 0;
padding: 0;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.top-space {
height: 130px;
width: 100%;
}
.top-name {
color: #000;
margin-left: 30px;
margin-right: 30px;
font-size: 1.1rem;
}
.top-text {
color: #000;
margin-top: 5px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
font-size: 2rem;
}
</style>
```
## 在微信小程序中發送和接收消息
發送消息
```javascript
send_msg() {
self.send({
MsgType: "Text", // 消息類型
Receiver: "pi_ultrasonic", // 接收者
Data: { // 內容
'optype': 'Init',
'pin': [31, 29]
},
});
}
```
接收消息
>[info] 接收消息的方法需要寫在created中,在頁面創建完成后就會執行這個接收函數。
```javascript
created() {
var _this = this;
// 在style.display = 'none' 以移除開發調試欄
document.getElementById("topmenu").style.display = "none";
self.receive = function (msg) {
_this.message = msg["Data"];
console.log(msg)
}
}
```
js完全代碼樣例
```JavaScript
<script>
module.exports = {
data() {
return {
value: 73.46546,
message: ""
};
},
created() {
// 在style.display = 'none' 以移除開發調試欄
var _this = this;
document.getElementById("topmenu").style.display = "none";
self.receive = function (msg) {
_this.message = msg["Data"];
console.log(msg)
}
},
methods: {
start_msg() {
self.send({
MsgType: "Start", // 類型為Start方法,也可以為Text\Start\Stop\.....
Receiver: "pi_ultrasonic",
Data: {
'optype': 'Init',
'pin': [31, 29]
},
});
},
formatTooltip(val) {
return val / 100;
},
},
};
</script>
```
- 自美智能物聯網系統簡介
- 1.系統安裝
- 樹莓派上安裝自美系統
- 香橙派上安裝自美系統
- 普通電腦和虛擬機下安裝自美系統
- 安裝自美智能物聯網系統
- 2.系統使用
- 獲取設備IP地址
- 自美系統的啟動與停止
- 進入控制面板
- 通過控制面板管理插件
- 控制面板系統配置
- 設置喚醒詞
- 開啟內網穿透服務
- 啟用SSH管理設備
- 使用微信小程序
- 3.開發者中心
- [重要必看]插件消息機制
- 配置開發環境
- 開發自美插件
- 開發微信小程序插件
- 開發前端插件
- 系統內置模塊說明
- Docker容器的使用方法
- Docker中使用攝像頭
- 燒錄ESP32單片機
- 4.樹莓派相關
- 自美樹莓派聲卡驅動板使用說明
- 樹莓派設備配網
- 樹莓派啟用VNC遠程桌面
- 樹莓派官方系統的燒錄
- 樹莓派啟動遠程SSH
- 樹莓派使用GPIO編程
- 樹莓派設備修改文件權限
- 5.香橙派相關
- 香橙派官方系統的燒錄
- 香橙派使用SSH服務
- 6.電視盒子相關
- 電視盒子使用自美系統
- 將armbian刷入eMMc
- 卸載自美系統
- 老版本系統說明
- 聯系我們