关于微信小程序开发介绍

发布日期： 2017-04-02 阅读量： 作者： 网络

一、微信小程序是什么：

言归正传，微信小程序的本质是什么？个人理解微信小程序本质还是一套前端框架，微信团队基于原来第三方h5页面在微信里只能通过h5实现原本可以由native实现的功能，例如上传图片等。进而采取的开放部分jsbridge的api来方便开发者。不过既然作为大厂肯定不会仅仅开放部分jsbridge的api就完了，顺便微信类似vue、react一样实现了一套自己的mvvm的框架就是目前的微信小程序。官方文档这样描述：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

本质还是一套前端框架，代码最终将会打包成一份 JavaScript并在小程序启动的时候运行，直到小程序销毁。模版语法类似vue，接近原生的自定义标签。数据绑定和渲染类似vue的语法，不过是以wx:开头(vue 以v: 作为标识) 事件系统类似react一样定义了一套自己的事件系统。

二、微信运行环境：

微信小程序运行在三端：iOS、Android 和用于调试的开发者工具

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中

在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析

在开发工具上，小程序的 javascript 代码是运行在 nwjs（chrome内核）中

页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window等bom对象。所以类似jquery、zepto等通过window或者document来获得dom对象的库是不能用来使用的。

三、目录结构：

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.js 逻辑部分，即全局变量或者方法

app.json 公共配置，包括页面配置等，顶部底部tab的设置，背景颜色等

app.wxss 公共样式表可以被具体page样式覆盖

app.js代码（代码取自微信官方demo）和注释说明如下：

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" &amp;&amp; cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" &amp;&amp; cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

# 微信小程序 # 微信小程序开发

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯7655 】【 SEO推广7619 】

上一篇: C++ lambda 表达式在算法设计中的常见做法是什么？

下一篇: C++ lambda 表达式在异步编程中的优势是什么？

关于微信小程序开发介绍

随便看看