微信小程序上手

这两天移动互联网领域发生了一件大事,微信发布了小程序,然后网上突然涌出了诸多教程,貌似大家对微信小程序的功能与想象空间兴奋不已,我免不了俗,搭建个简易的开发环境玩一玩。

搭建开发环境

按官方教程,是得先获得内测资格,取得微信小程序appid后,才可进行小程序开发的。很不幸,我没获取内测资格,但随便一搜,就找到网上的破解教程,我就学习玩一玩,就直接破解吧。

首先下载0.7版的微信web开发工具

百度: https://pan.baidu.com/s/1pLxqFzH (密码: bwt9)

安装完毕后,打开开发工具用手机微信扫描登录进去,然后就可以关闭微信web开发工具,删除刚安装的微信web开发工具。你没有听错,就是删除,0.7版本的作用仅仅是用于登录,呵呵。

再下载0.9版的微信web开发工具

百度: https://pan.baidu.com/s/1pLTKIqJ (密码: iswg)

再完成安装。

完成后需替换3个文件:

  • 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/createstep.js这个文件替换开发工具里/Resources/app.nw/app/dist/components/create/createstep.js
  • 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/projectStores.js这个文件替换开发工具里/Resources/app.nw/app/dist/stroes/projectStores.js
  • 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/asdebug.js这个文件替换开发工具里/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

之后打开开发工具,然后点添加项目创建一个新的小程序项目

create_wx_app.png

然后填写项目细节,我没有内测帐号,就随便填appid, 项目名称也随便填,本地开发目录选个空目录就好了。

create_wx_app_detail.png

然后项目就打开了。

wx_app_ide.png

不一会儿提示有更新,微信web开发工具升级了,提示重启,那么就重启吧。重启后要重替换一下asdebug.js文件,这样开发环境就算OK了。

分析程序结构

先看一下程序结构

wx_app_src_struct.png

其中app.js是用来注册一个小程序的,主要用来响应应用生命周期事件,还可以保存应用的全局状态,详细文档可参考http://wxopen.notedown.cn/framework/app-service/app.html

app.json是应用的全局配置文件,主要用来配置应用所包含的页面、设置应用全局样式、多tab应用的配置、各种网络请求的超时时间、是否开启调试等,详细文档可参考http://wxopen.notedown.cn/framework/config.html

app.wxss是应用的全局样式文件,样式文件的规范可参考http://wxopen.notedown.cn/framework/view/wxss.html

pages目录下每个目录都是一个独立的页面,每个页面的结构都很类似。

页面目录中的*.js定义了该页面的处理逻辑,可以定义初始化数据、响应页面的生命周期事件、定义视图层要用的事件处理函数。详细文档可参考http://wxopen.notedown.cn/framework/app-service/page.html。在这里可以调用微信提供的各种API,API参见http://wxopen.notedown.cn/api/,看样子还是挺丰富的。

页面目录中的*.wxml定义了该页面的视图层,用于将逻辑层的数据展现,同时将组件的某些用户操作绑定至事件处理函数。详细文档参见http://wxopen.notedown.cn/framework/view/wxml/。可用的组件文档参见http://wxopen.notedown.cn/component/

页面目录中的*.wxss定义了该页面用到的样式。

简单分析示例代码

app.js

//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
  }
})

这个代码比较简单。

  • 响应应用的启动事件,在其中调用微信API读取本地存储中的logs值,往里插入一条当前时间后,再存回本地存储的logs值
  • 提供一个getUserInfo方法,便于其它页面快捷地获取用户信息
  • 为了减少调用微信API的次数,将获取到的用户信息保存在全局变量中

index.js

//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
      })
      that.update()
    })
  }
})

上述代码也很简单。

  • 定义页面所依赖的初始数据data
  • 定义了一个事件处理函数bindViewTap
  • 响应页面的加载事件,在其中获取用户信息,获取到用户信息后更新数据data,最后强制刷新视图

index.wxml

<!--index.wxml-->
<view class="container">
  <view  class="userinfo" bindtap="bindViewTap">
    <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>

视图层就更简单了,就是绑定逻辑层数据,然后使用bindtap="bindViewTap"绑定了一个逻辑层的事件处理函数。

logs目录下的代码与上面也很类似,就不具体解释了。唯一要说明的是其中引入自已写的其它js,这个地方是使用的CommonJS的引入语法。

1

var util = require('../../utils/util.js')

评价

整合看整个小程序的源码架构还是比较简单的,特别是每个页面使用了View-ViewModel的结构,以前使用过ReactJS,对这个还是挺熟悉的,用起来很自然。

小程序提供的组件还是比较丰富的,而且试用了下,反应很迅速,猜测是类似ReactNative的实现方案。

微信给小程序提供的API也还算丰富,剩下就看利用这些API都构想出什么创意了。

小遗憾

估计真实开发很少人会直接用开发工具里的编辑器的,反正我是习惯用sublime的。但每次在sublime里改完代码都需要回到开发工具里按Cmd+B重新编辑后才可以查看效果,习惯了webpack,gulp那种保存后即编译刷新的开发方式,这样还真不习惯。

参考

http://blog.csdn.net/xiehuimx/article/details/52629657 https://github.com/gavinkwoe/weapp-ide-crack http://wxopen.notedown.cn/framework/structure.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 彻底解决pvc无法mount的问题

    上周解决pvc无法mount的问题,其实留了一个尾巴,当时只是知道由于未知的原因,AttachDetachController执行detach操作失败了。这周这...

    jeremyxu
  • atom-shell小例子

    jeremyxu
  • 使用dex搭建一个身份认证系统

    一个成熟的软件系统一般必须有一个可靠的身份认证与权限验证功能。这一块要自研快速实现还是需要花费挺多精力的,幸好开源领域目前已经有不错的解决方案,一般拿过来按项目...

    jeremyxu
  • android实现滑动标签页效果的代码解析

    listview的数据显示请见Android Studio获取SQLite数据并显示到ListView上Fragment+ViewParger实现界面加载 首...

    砸漏
  • 第45天:2017webstrom下载破解汉化

    1、webstrom 11.0.3下载地址1:http://pan.baidu.com/s/1kVQjcwf 密码:uggr

    半指温柔乐
  • 干货 | 从定义到应用,数据挖掘的一次权威定义之旅

    什么是数据挖掘 前两天看到群里有人问,什么是数据挖掘,现在就数据挖掘的概念做一下分析,并且尽量用大白话说一下数据挖掘到底是个啥东西,为啥大数据来了数据挖掘也火了...

    小莹莹
  • 干货 | 从定义到应用,数据挖掘的一次权威定义之旅

    用户1756920
  • 逻辑斯蒂回归模型

    总第83篇 01|基本概念: 在介绍逻辑回归模型以前,先介绍一下逻辑斯谛分布。 设X是连续型随机变量,X服从逻辑斯蒂分布是指X具有下列分布函数F(x)和密度函数...

    张俊红
  • 由MySQL中的falcon存储引擎引申的八卦杂谈(r5笔记第23天)

    今天在看<<MySQL技术内幕>>这本书时 ,看到大师paul Dubois对于Falcon存储引擎的介绍,这是一种用来进行事务处理的存储引擎。在设计时增加了一...

    jeanron100
  • 数据挖掘工程师必备的技能有哪些?

    R,Python,C ++,Java,Matlab,SQL,SAS,shell / awk / sed…

    加米谷大数据

扫码关注云+社区

领取腾讯云代金券