微信小程序_1

发表于 | 更新于 | 分类于

1.下载微信小程序编辑器：下载微信小程序编辑器

2.创建小程序应用：打开刚才下载的dmg，用微信扫面二维码登陆。点击本地小程序项目，就可以开始开发了。

3.先介绍下目录结构：

F6B51227-E9DB-433B-86E3-336916B6E88B.png
pages文件夹中放的都是页面，app.js相当于iOS的appdelegate,app.json就是app的配置,app.wxss就是css样式文件。
每一个页面都单独有一个js，json，wxss文件。
4.app.json文件分析

1
2
3
4
5
6
7
8
9
10
11
12
13
{//所有的页面都在这里列出来
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/button/button"
  ],
  "window":{ //app的样式
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

5.先做一个小demo(js，json，wxml，wxss都是新建的)
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//获取应用实例
var app = getApp()
Page({
  data:{
    count:0,
    text: '加载了了0次',
    loadingstatus: false,
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log("onLoad");
    
  },
  onReady:function(){
    // 页面渲染完成
    console.log("onReady");
  },
  onShow:function(){
    // 页面显示
    console.log("onShow");
  },
  onHide:function(){
    // 页面隐藏
    console.log("onHide");
  },
  onUnload:function(){
    // 页面关闭
    console.log("onUnload");
  },
  button1click: function(){
   var that = this;
   that.data.count++;
   that.setData({ //更改属性的值
       text:'加载了'+that.data.count+'次',
       loadingstatus:that.data.count%2 == 0 ? true:false,
   })
  },
})

//这里的data就是页面的数据和函数，
onShow,onHide,onReady,onUnload都是生命周期函数，
button1Click是button的click函数
这框架是data和页面的绑定起来的，只要改变data的值，页面就会随着变化，这点和iOS有点不同。

button.json 文件
{
     "navigationBarTitleText": "ButtonDemo" 这是页面的title
}

button.wxml文件

<view class="container"> 
    <view class="button-wrapper">
    <button type="default" bindtap="button1click"  size="default"  
    loading="{{loadingstatus}}" > 点我
    </button>
     </view>
<text class="countClick" id="text1">{{text}}
</text>
</view>

button.wxss

.countClick{
    margin-top: 100rpx;
    width: 200rpx;
    height: 50rpx;
    text-align: center;
    font-size: 1em;
    background-color: cadetblue;
}

 bindtap="button1click"  绑定点击事件到buttonclick函数
{{text}}   {{data中的属性}}

今天还看到一段比较好玩的代码：
1
2
3
4
5
6
7
8
9
10
for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])

可能做iOS的没看过js的人这点看不太懂，我也是新手，哪里说的不对，欢迎前端大神指正。
大概意思是：
1
2
3
4
5
6
7
8
9
10
for (var i = 0; i < types.length; ++i) { 循环数组
  (function(type) { //写法js(function)(item)
    pageObject[type] = function(e) { //添加属性函数 就是增加了几个函数。
      var key = type + 'Size' //拼接字符串
      var changedData = {} //字典
      changedData[key] = //字典赋值
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData) //相当于iOS的kvo用hash值的方式给自己的属性赋值
    }
  })(types[i]) //执行函数

这一个系列的Demo都会在这个仓库哦，欢迎大神吐槽。
demo地址