热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于微信小程序开发介绍

言归正传,微信小程序的本质是什么?个人理解微信小程序本质还是一套前端框架,微信团队基于原来第三方h5页面在微信里只能通过h5实现原本可以由native实现的功能,例如上传图片等。进而采取的开放部分jsbridge的api来方便开发者。
一、微信小程序是什么:

言归正传,微信小程序的本质是什么?个人理解微信小程序本质还是一套前端框架,微信团队基于原来第三方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" && 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
}
})
{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

具体页面一般包括一下文件(与全局文件类似,不过仅仅作用于该页面):

.js 页面逻辑 就是js没什么差别

.wxml 页面结构 对应html,不过是应用了不少自定义标签

.wxss 页面样式表 对应css文件,优先级比appapp.wxss高,css的写法并未完全支持

.json 页面配置 指定特定页面的title等元素

为了方便开发者减少配置项,规定描述页面的这四个文件必须具有相同的路径与文件名。

也就是说,我们不用指定某个页面对应的js或者wxss文件,只需要保持路径和文件名相同即可。

四、模版语言及事件系统

1):模版语法类似vue,接近原生的自定义标签。数据绑定和渲染类似vue的语法,不过是以wx:开头(vue 以v: 作为标识)

/**
* 类似vue的条件渲染语法,熟悉vue的话应该不会陌生
**/

2):事件系统

事件系统类似react:定义了一套自己的事件系统。包含一系列常用事件类型:

touchstart 手指触摸动作开始

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断,如来电提醒,弹窗

touchend 手指触摸动作结束

tap 手指触摸后马上离开

longtap 手指触摸后,超过350ms再离开

绑定方式:事件绑定的写法同组件的属性,以 key+value 的形式:

以bind或catch开头,然后跟上事件的类型,如bindtap catchtouchstart,

value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡 。例如:

/**
*bind/catch +事件类型,两种事件绑定方式
*/

 outer view
 
 middle view
 
  inner view
 
 

3):事件对象:包括BaseEvent 基础事件对象,CustomEvent 自定义事件对象,TouchEvent 触摸事件对象等。

五、优缺点:

1):优点

1、提供相应的类似jsbridge的支持,使得某些功能更为方便

2、本质是mvvm的前端框架,简化操作。

3、提供了比较成型的组件库,构建比较方便

4、基于微信appapp,使得开发成本下降

5、支持模块化

2):缺点

1、由于框架并非运行在浏览器中,js相关bom的方法无法使用。如 document,window等。不过可以获取当前事件对应的dom对象。相比react还是一样不建议操作dom,jq,zepto等工具库也不好使了

2、又是一套自己的语法,需要学习时间,不过学习曲线不陡峭

3、目前不支持直接引入 node_modules ,开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中这样局限性就比较大了,需要自己手动的东西好多

以上就是关于微信小程序开发介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 高效批量文件重命名软件
    开发了一款基于Python的高效批量文件重命名软件,并集成了wxWidgets图形用户界面,使用cxfreeze将其打包为独立的可执行文件(exe)。该工具适用于需要频繁处理大量文件的用户,能够显著提高文件管理效率。详细使用说明包含在软件压缩包内。开发环境为Python 2.7和wxWidgets 3.0,运行环境要求兼容Windows系统。 ... [详细]
  • 如何在IDEA中安装和配置反编译插件以提高代码审查效率
    在 IntelliJ IDEA 中提升代码审查效率的一种方法是安装和配置反编译插件。首先,进入 IDEA 的设置界面,然后导航到插件管理部分。接下来,搜索 "ideaJad" 插件并进行安装。安装完成后,重启 IDEA 以确保插件生效。这将帮助你在审查二进制文件时更加高效地查看源代码。 ... [详细]
  • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
  • 尽管许多人认为跑步是一项简单的运动,但实际上它涉及诸多专业知识。不正确的跑步方式不仅会降低锻炼效果,还可能引发伤害。例如,穿着不合脚或过于陈旧的跑鞋,会导致足部支撑不足,增加受伤风险。此外,跑步姿势不当、热身不足、过度训练等问题也同样值得关注。本文将详细介绍七大常见跑步误区,并提供专业的改进建议,帮助跑者避免这些问题,提高运动效率和安全性。 ... [详细]
  • 本文深入探讨了 iOS 开发中 `int`、`NSInteger`、`NSUInteger` 和 `NSNumber` 的应用与区别。首先,我们将详细介绍 `NSNumber` 类型,该类用于封装基本数据类型,如整数、浮点数等,使其能够在 Objective-C 的集合类中使用。通过分析这些类型的特性和应用场景,帮助开发者更好地理解和选择合适的数据类型,提高代码的健壮性和可维护性。苹果官方文档提供了更多详细信息,可供进一步参考。 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • Select2.js下拉框应用总结与实践要点
    在使用Select2.js下拉框插件的过程中,积累了诸多实践经验与心得。尽管最初觉得Select2在某些方面不尽如人意,但在对比了其他选项后,发现其仍是最优选择。本文将详细探讨Select2.js的配置、优化技巧及常见问题解决方法,帮助开发者更好地利用这一强大的前端工具。 ... [详细]
author-avatar
福州精诚小家电
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有