# 一、開通內網穿透 >[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> ```