小程序原生组件是什么？
微信小程序在最初上线的时候就备受好评，大家觉得它既满足了大众的需求，又能节省手机内存，对于小程序原生组件，很多人表示不理解，接下来小编就给大家说明一下。
项目小程序目录结构
dist
node_modules
src
components
com_a.wpy
com_b.wpy
pages
index.wpy
page2.wpy
app.wpy
package.json
开发使用说明
使用 微信小程序开发者工具 新建项目，本地开发选择 dist 目录。
微信开发者工具 –> 项目 –> 关闭ES6转ES5。
本地项目根目录运行 wepy build --watch ，开启实时编译。
代码规范：
变量与方法使用尽量使用驼峰式命名，避免使用 $ 开头。
以 $ 开头的方法或者属*为框架内建方法或者属*，可以被使用，使用前请[参考API文档]()。
入口，小程序页面，组件的命名后缀为 .wpy 。外链的文件可以是其它后缀。
请参考
wpy文件说明
使用ES6语法开发。
框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
使用Promise
框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用 async/await 等新特*进行开发。
主要解决问题：
1. 开发模式转换
在原有的小程序的开发模式下进行再次封装，更贴近于现有MVVM框架开发模式。框架在开发过程中参考了一些现在小程序开发框架的一些特*，并且融入其中，以下是使用wepy前后的代码对比图。
官方DEMO代码：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
console.log('button clicked')
},
onLoad: function () {
console.log('onLoad')
}
})
基于wepy的实现：
import wepy from 'wepy';
export default class Index extends wepy.page {
data = {
motto: 'Hello World',
userInfo: {}
};
methods = {
bindViewTap () {
console.log('button clicked');
}
};
onLoad() {
console.log('onLoad');
};
}
2. 支持组件化开发。
参见章节： 组件
示例代码：
// index.wpy
3. 支持加载外部NPM包。
在编译过程当中，会递归遍历代码中的 require 然后将对应依赖文件从node_modules当中拷贝出来，并且修改 require 为相对路径，从而实现对外部NPM包的支持。如下图：
4. 单文件模式，使得目录结构更加清晰。
官方目录结构 要求app必须有三个文件 app.json ， app.js ， app.wxss ，页面有4个文件 index.json ， index.js ， index.wxml ， index.wxss 。而且文件必须同名。
所以使用wepy开发前后开发目录对比如下：
官方DEMO：
project
pages
index
index.json
index.js
index.wxml
index.wxss
log
log.json
log.wxml
log.js
log.wxss
app.js
app.json
app.wxss
使用wepy框架后目录结构：
project
src
pages
index.wpy
log.wpy
app.wpy
5. 默认使用babel编译，支持ES6/7的一些新特*。
用户可以通过修改 .wepyrc 配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特*如 promise ， async/await 等等。
示例代码：
import wepy from 'wepy';
export default class Index extends wepy.page {
getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({data: 123});
}, 3000);
});
};
async onLoad() {
let data = await this.getData();
console.log(data.data);
};
}
6. 针对原生API进行优化。
对现在API进行promise处理，同时修复一些现有API的缺陷，比如：wx.request并发问题等。
原有代码：
onLoad = function () {
var self = this;
wx.login({
success: function (data) {
wx.getUserInfo({
success: function (userinfo) {
self.setData({userInfo: userinfo});
}
});
}
});
}
基于wepy实现代码：
async onLoad() {
await wx.login();
this.userInfo = await wx.getUserInfo();
}
小程序原生组件是什么，上文已经进行了阐释，究竟要怎么去使用小程序原生组件，由此进行微信小程序开发呢?需要你自己去探索了。更多相关资料请关注微信小程序素材网。
微信小程序icon图标组件说明，小程序icon图标使用方法
微信小程序按钮点击事件，微信小程序按钮组件：button
微信小程序示例原码,微信小程序示例原码是什么?