微信小程序上手

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

搭建开发环境

按官方教程,是得先获得内测资格,取得微信小程序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 条评论
登录 后参与评论

相关文章

来自专栏云飞学编程

Python新手爬虫,简单制作抓取廖雪峰的教程的小爬虫

先看几张对比图,分别是官网截图和抓取下来的txt文档的截图,不算那难看的排版的话,内容是一致的,图片用url替换了!

31010
来自专栏Jerry的SAP技术分享

SAP GUI里Screen Painter的工作原理

Connection Type为T,当Layout按钮被点击后,通过TCP/IP通知执行文件gnetx.exe:

18140
来自专栏丑胖侠

Win10系统,Intellij IDEA快捷键冲突

前两天系统盘损坏,升级到了Win10系统,重新装了软件,导致Intellij IDEA的快捷键各种冲突。本篇博客记录一下发型冲突的地方及修改方法。 冲突一 Ct...

358100
来自专栏美丽应用

Linux Deploy:部署图形界面环境

64610
来自专栏无原型不设计

【Mockplus教程】收藏和重用

1. 制作模板 选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功...

27040
来自专栏听雨堂

JQuery笔记(三) jquery的用途

  近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干...

33790
来自专栏木子昭的博客

简单优化前端工程几种方式(上篇)

如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源,...

9830
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

1K20
来自专栏程序员的碎碎念

ThinkPHP+PHPExcel实现excel导入导出数据(一)

没错,今天又将是一篇技术帖,一篇关于tp进阶学习的教程,看标题你就知道我要做的是什么啦? 首先我带大家科普一下什么是phpexcel? ? ...

35750
来自专栏Jerry的SAP技术分享

小技巧:如何突破某些网站只能登陆后才能进行文字拷贝的限制

我写公众号文章时,经常需要从一些网站的文章上查阅一些资料。比如我想把这个网页上的一个标题“SAP Fiori 2.0用户体验设计概念获红点大奖”进行拷贝。

12930

扫码关注云+社区

领取腾讯云代金券