微信小程序现在很火，于是也就玩玩，做了一个简易的留言板，让大家看看，你们会说no picture you say a j8 a,好吧先上图。
样子就是的，功能一目了然，下面我们就贴实现的代码，首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）总感觉怪怪的，有木有。
微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。
看我们的布局代码，超简单，完全和css一样
才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.js React或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！
完美的36行，早知道wxml注释写一堆应该也凑个36，这个数字多顺啊。
哈哈哈，好了，所有的功能代码都在这里了，大家赶快也去玩玩吧。
首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）
<!--index.wxml--><view class="msg-box">
<!--留言-->
<view class="send-box">
<input bindinput="changeInputValue" class="input" type="text" value="{{inputVal}}"
placeholder="请输入留言……" placeholder-class="place-input" />
<button size="mini" type="primary" bindtap="addMsg">
添加
</button>
</view>
<!--留言列表-->
<text class="msg-info" wx:if="{{msgData.length==0}}">
暂无留言……^_^
</text>
<view class="list-view">
<view class="item" wx:for="{{msgData}}" wx:key="{{index}}">
<text class="text1">
{{item.msg}}
</text>
<!--button size="mini" plain class="close-btn" type="default">删除</button-->
<icon type="cancel" bindtap="DelMsg" data-index="{{index}}" class="close-btn"
/>
</view>
</view>
</view>
微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。
看我们的布局代码，超简单，完全和css一样
/**index.wxss**/.msg - box {
padding: 20px;
}.send - box {
display: flex;
}.input {
border: 1px solid#B0C4DE;
padding: 5px;
}.msg - info {
display: block;
margin: 10px 0 0 0;
color: #339900;
}.place - input {
color: salmon;
}.list - view {
margin: 20px 0 0 0;
}.item {
overflow: hidden;
border - bottom: 1px dashed#87CEFF;
height: 30px;
line - height: 30px;
}.text1 {
float: left;
}.close - btn {
float: right;
margin: 5px 5px 0 0;
}
才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.js React或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！
js代码如下：
//index.js//获取应用实例
var app = getApp();
Page({
data: {
msgData: []
},
changeInputValue(ev) {
this.setData({
inputVal: ev.detail.value
})
},
//删除留言
DelMsg(ev) {
var n = ev.target.dataset.index;
var list = this.data.msgData;
list.splice(n, 1);
this.setData({
msgData: list
});
},
//添加留言
addMsg() {
var list = this.data.msgData;
list.push({
msg: this.data.inputVal
});
//更新
this.setData({
msgData: list,
inputVal: ''
});
},
})
1、模板+拖拽制作。这种模式下，工具平台方会提供一些比较典型的行业、场景模板，同时还会提供比较丰富的相关功能模块，这些功能模块可以自由“装卸”到模板上去。模板比较全面地体现了相关类别小程序的整体框架，用户基于该模板框架，结合自身的具体需求，通过拖拽方式对各种各样的模块进行自由组合，从而实现各种各样的个性化需求。
2、组件化的快速开发模式。能到“组件化”这个层面，足以表明这种模式其实已经开始颇有点专业开发的味道了。这种模式下，主要特征是将各种比较通用的代码模块封装成一个个组件，未来开发中不用重复编写这些模块的代码，而是直接拖用组件。
什么订阅号留言板、快言、留言墙、小互动助手什么的。
体验下来，小互动助手体验最好。我一个菜鸡，直接拿来用，哈哈。
他们都有自己的公众号的，其他两个就是他妈的名字，小互动助手的叫：小互动服务号。
其中小互动助手是免费使用的。哈哈 我就是喜欢免费的，而且体验还最好。