微信小程序demo 分析

最近微信小程序吵得很火 也决定来看看这个小程序

说什么小程序 其实就是个webapp而已

先看看官网是个什么鬼

下载源码

打开一看 项目结构

quickstart

1. pages (页面文件)
2. utils (工具函数)
3. app.js (入口文件)
4. app.json (管理注册文件 和package.json 类似)
5. app.wxss (样式文件)

1. 先看app.js 入口文件
   作为程序的入口 暴露了一个全局对象App
   其中 又有2个方法 和一个对象
   onLaunch getUserInfo globalData

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

2. app.json 注册页面和样式 资源文件清单

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

3. pages index.js 看每个页面 一个Page对象 这尼玛不是和vue 差不多吗
   和vue template 就是 dom 类似 自定义标签

 <!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

这就是 script 和 vue实例差不多

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss 这个就是样式文件 换了个后缀名而已

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

看完了 其实和vue项目差不多 不过是腾讯自己封装而已
所示小程序 和纯粹的webapp比的话
微信内部 暴露了 wx 对象 采用wx 对应 可以大大拓展下web的能力而已
但还是不能超过原生的边界

微信小程序资源汇总
笑看微信小程序