如何通过微信小程序看web前端

本篇内容介绍了“如何通过微信小程序看web前端”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码角度

纵观整个开发文档，微信小程序的前端技术主要可以分为“框架”、“组件”和“API接口”。

1.框架

微信提供了一套自己的用于开发小程序的前端框架，和目前主流的前端框架相比，其既有类似的地方，也有特殊的地方。

特殊的地方在于其只能在微信小程序开发工具内使用，并做了相对严格的使用和配置限制，开发者必须按照其规定的用法来使用。一些外部的框架和插件在小程序里都是无法使用的，同时由于框架并非运行在浏览器中，所以  JavaScript 在 web 中一些能力都无法使用，如document，window等。

而相似的地方在于其包含了和其他框架一样的“逻辑层”和“视图层”，以数据驱动为主，不操作DOM元素等。下面以代码为例子来介绍：

(1)数据绑定

<!--wxml--> <view> {{message}} </view>

// page.js Page({     data: {       message: 'Hello MINA!'     } })

Page() 方法用来注册一个页面。接受一个 OBJECT  参数，其指定页面的初始数据、生命周期函数、事件处理函数等。这乍一看怎么和目前流行的Vue框架语法十分类似呢，Vue代码如下：

<view> {{message}} </view>

// page.js new Vue({   data: {     message: 'Hello MINA!'   } })

都是双括号插值语法，连数据初始化和双向绑定的格式都一样，好吧，就当纯属巧合吧。

这里需要注意的是，微信小程序提供了WXML后缀的文件类型，其实就是类似XML的标签语言文件。

(2)列表渲染

<!--wxml--> <view wx:for="{{array}}"> {{item}} </view>

// page.js Page({     data: {       array: [1, 2, 3, 4, 5]     } })

这样的列表渲染语法相信学过Angular和Vue的同学都比较容易掌握，都是非常的类似，当然还有条件渲染等。

(3)事件绑定

<view bindtap="add"> {{count}} </view>

Page({     data: {       count: 1     },     add: function(e) {         this.setData({             data: this.data.count + 1         })     } })

如果你学过React，那么其里面有一个setState的方法可以用来改变状态的值，这里的setDate也是一样的，通过绑定的add方法来改变视图中count的值。

(4)样式导入

 .small-p {     padding:5px; }

 @import "common.wxss";  .middle-p {     padding:15px; }

这里小程序提供了又一种新的文件后缀类型WXSS，用于描述WXML的组件样式，其与CSS文件相比还提供了像SASS和LESS这样的预编译语言的样式导入功能，同时还提供了rpx及rem的单位尺寸功能。

(5)模块化

// common.js function sayHello(name) {     console.log('Hello ' + name + '!') } module.exports = {     sayHello: sayHello }

var common = require('common.js') Page({     helloMINA: function() {       common.sayHello('MINA')     } })

微信小程序秉承了JS模块化的机制，熟悉Require.js或者Sea.js的同学应该很熟悉，这里通过module.exports暴露对象，通过require来获取对象。

2.组件

小程序的组件其实也是框架的一部分，主要负责UI的呈现，也自带了一些功能与微信风格的样式。基本上移动端常用的组件都包含在内，比如表单组件、导航组件、媒体组件等。下面便是小程序提供的八类组件：

对于小程序的组件使用其实不是非常复杂，按照文档的使用示例便可以轻松搞定，详细地址：https://mp.weixin.qq.com/debu...

3.API接口

相比微信公众号的开发，微信小程序向开发者提供了更多的API接口，可以方便的调起微信提供的能力，比如监听重力感应和罗盘数据、WebSocket连接、支付功能等。下面以一个发起网络请求的API为例：

wx.request({     url: 'test.php',     data: {         name: 'luozh' ,         age: 18     },     header: {         'Content-Type': 'application/json'     },     success: function(res) {         console.log("请求成功")     },     fail: function() {         console.log("请求失败")     } })

wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。关于更多API接口的介绍请查阅官方文档。

以上便是关于微信小程序前端代码部分的简单介绍，相信有一点前端框架使用经验的同学上手都是相对容易的，下面将从宏观角度讲解下我个人认为微信小程序给前端领域的带来影响。

宏观角度

微信小程序一出来的时候，网上关于其对于前端界的影响层出不穷，更多的文章和评论认为前端又要火了，前端的第二春来了，Javascript和HTML5的新时代来了等。

当然微信小程序的出现确实会给前端带来一定的推波助澜的效果，但是任何一件事物的诞生都是利弊并存的，微信小程序也不例外。以下便简单阐述下我个人的看法：

1.利

(1)提高开发兼容性：微信小程序可以说是重新定义了APP，使得一款应用能够在android、iphone及windows  phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。

(2)推动前端技术的发展：微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术在庞大的微信社交群体内传播，越来越多的人开始接触前端，参与到前端编码和设计中来，为前端技术贡献力量。

(3)其他...

2.弊

(1)增加前端工作量及学习成本：原本一名前端工程师负责的平台就很广泛，包括PC端、移动端、APP应用等，微信小程序的出现会要求前端涉及微信应用的开发，一定程度增加了学习和工作成本。同时企业也会增加这方面的开发和投入成本。

(2)前端竞争日趋明显：微信小程序的诞生可能又会吸引一批后台、APP开发等其他领域的人员转向前端开发，而这些本来就具备较强逻辑思维或者较强感性思维的人将挤掉那些处于前端边缘的新手，可能使得大部分低水平前端开发者面临失业或者找不到工作的危险。

“如何通过微信小程序看web前端”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！