# 一、开通内网穿透 >[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> ```