让我们先看一个简单的示例，适合不太熟悉微信小程序的同学学习，多读几遍你应该可以很轻松的理解微信小程序的运行机制以及语法使用
先看看DEMO
项目的目录是这个样子的:
app.js、app.json、app.wxss是全局文件，必不可少的文件。定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。
app.js文件代码:
| | App({
| | onLaunch: function () {
| | console.log('小程序已启动')
| | },
| | onShow: function () {
| | console.log('小程序显示')
| | },
| | onHide: function () {
| | console.log('小程序隐藏')
| | },
| | globalData: {
| | hasLogin: false
| | }
| | }) |
|
app.json文件代码：
| | {
| | "pages": [
| | "page/first/first"
| | ],
| | "window": {
| | "navigationBarTextStyle": "black",
| | "navigationBarTitleText": "我的第一个小程序",
| | "navigationBarBackgroundColor": "#fbf9fe",
| | "backgroundColor": "#fbf9fe"
| | }, "debug": true} |
|
app.json中pages起到设置页面路径的作用。
app.wxss是样式文件，就跟css文件一样，里面暂时就没写代码了，不影响。
然后是first文件夹下的文件
first.js文件是逻辑文件，就好比是框架中的控制器；first.json是配置文件，一些文件的路径需要些在里面；first.wxml就好比是html文件；first.wxss就好比是html的css文件。
first.js文件代码：
| | var status = true;
| | Page({
| | toastShow: function(event) {
| | console.log("触发了点击事件，弹出toast")
| | status = false
| | this.setData({status:status}) //setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
| | },
| | toastHide:function(event){
| | console.log("触发bindchange，隐藏toast")
| | status =true
| | this.setData({status:status})
| | },
| | data:{
| | status:status //data里面的属性可以传递到视图
| | }
| | }) |
|
first.wxml文件代码：
| | <button type="default" bindtap="toastShow">点击弹出toast</button>
| | <toast hidden="{{status}}" duration="3000" bindchange="toastHide">这是toast</toast>
| | <view class="myStyle">这是status的值:{{status}}</view> |
|
提示：
| | toast标签的duration
| | 属性说明：hidden设置false后，触发bindchange的延时，单位毫秒。
| | 在本应用中，点击了button后，触发bindtap的绑定事件toastShow：
| | 将status设置为false，也就是显示toast。
| | 随后过了3秒钟，触发了toast标签中bindchange的绑定事件toastHide，将status设置为true，也就是隐藏toast。 |
|
first.wxss文件代码：
| | .myStyle{
| | color:cyan;
| | text-align: center
| | } |
|
