本文目录一览：
- 1、微信小程序是用什么技术实现的？
- 2、微信小程序的index.js怎么写？详细代码见下方↓
- 3、微信小程序wxs的使用（当页面数据渲染前添加js操作)
- 4、怎样用js开发微信小程序
- 5、怎样使用微信小程序的第三方js库？
微信小程序是用什么技术实现的？
一、微信小程序的wxml
具有基本的编程经验的工程师，只有与wxml接触后，您才会发现该语言的编程概念类似于html网页的编程技术。经过一番研究和开发，您会知道微信小程序的要求技术含量不高，只是更换了一些标签，例如
已替换为等待状态。即使您不太擅长前端，转用微信小程序的发展也将是一个很好的方向。
二、微信小程序的wxss
wxss是微信的CSS。微信用自己的开发语言wxss代替了Web编程中使用的css；实际上，主要的实现思想与Web开发技术基本相同，并且它只是对某些标签的简单替换，其中大部分是原始的CSS，基本上是正确的。它们都是通过调用同一页面来实现的，但是可以说，微信小程序比Web开发更简单，更方便。例如，只要写入index.wxml和index.wxss，它就位于两个文件中。这两个文件同时位于同一目录中，就像直接在网页上写CSS一样，这既简单又快速。
三、微信小程序的js
如果要开发微信小程序，您必须精通微信小程序的js。只要您具有html+css+js的良好基础，就可以全力学习微信小程序js，然后在前端进行开发。上面没有问题，但是微信js需要努力学习。您可以购买参考书或了解微信小程序的API，它们可以快速帮助您参与开发队列。
四、微信小程序的json
掌握了以上几点之后，您需要掌握json。简而言之，json是微信小程序的主要和次要接口。工程师可以通过json控制上下菜单栏，主要和辅助页面的显示顺序。但是，使用频率不高。它仅适用于基本小程序的框架，但这也需要学习，因为除显示类型外，每个前端操作都需要与后端匹配，因为如果要使其放大，则必须之所以简化，是因为修改代码后，在迷你程序中搜索到的版本就是启动后的版本，即我们提交微信评论后显示的版本。修改源代码后，需要将其提交给微信公众进行审核。平台小程序管理平台，用户只能在审核通过后才能看到您的修改，因此，为避免这种麻烦，您必须了解后端技术开发并与前端链接以与您进行交流。
实际上，小程序类似于H5表面，并提供了视图层描述语言。您需要掌握WXML和WXSS以及基于JavaScript的逻辑层框架。这里的wxml等同于html，而wxss等同于CSS。
微信小程序的index.js怎么写？详细代码见下方↓
微信小程序实例index.js代码如下：
可以搜索小程序名称： 快递最后一公里
实例index.js代码
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
//三张图片轮播
imgUrls: [
{
imageUrl: '/images/weicha/timg1.jpg',
},
{
imageUrl: '/images/weicha/timg2.jpg',
},
{
imageUrl: '/images/weicha/timg3.jpg',
}
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 800,
},
onSwiperTab: function (e) {
/*var postId = e.target.dataset.postId;
wx.navigateTo({
url: postId,
});*/
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
app.loginWinCha(this.initPageData);
},
//初始化登录才能查看的数据
initPageData: function () {
this.setData({
componentList: [
{
id: 1,
url: '../weicha/express/courier/index',
imageUrl: '/images/weicha/timg1_1.jpg',
title: '快递小哥(送快递)',
queryType: 'courier'
},
{
id: 2,
url: '../weicha/express/seller/index',
imageUrl: '/images/weicha/timg1_2.jpg',
title: '合作商家(代收快递)',
queryType: 'seller'
},
{
id: 3,
url: '../weicha/express/personal/index',
imageUrl: '/images/weicha/timg1_3.jpg',
title: '收件人(签收快递)'
},
{
id: 4,
url: '../weicha/express/logistics/index',
imageUrl: '/images/weicha/timg1_4.jpg',
title: '快递物流查询'
}
]
});
},
onItemClick: function (e) {
var targetUrl = e.currentTarget.dataset.pay;
var targetQueryType = e.currentTarget.dataset.index;
if (targetQueryType == "seller") {
var reqData = {
seller_openId: app.globalData.openid,
status: '2'
};
this.queryDBUtil("sellerInfo", reqData, targetQueryType, targetUrl,
"亲，您暂未申请商家,请提交商家申请！");
} else if (targetQueryType == "courier") {
var reqData = {
courier_openId: app.globalData.openid,
status: '2'
};
this.queryDBUtil("courierInfo", reqData, targetQueryType, targetUrl,
"亲，您暂未申请快递员,请提交快递员申请！");;
} else {
wx.navigateTo({
url: targetUrl
});
}
},
queryDBUtil: function (reqCollectionName, reqData,queryType, retUrl,retMgs){
wx.cloud.callFunction({
name: "utilsDB",
data: {
collectionName: reqCollectionName,
collectionWhere: reqData
},
complete: res = {
let retStatus = '1';
if (res.result.data.length = 1) {
retStatus = res.result.data[0].status;
}
if (retStatus == '2') {
if (queryType == "seller"){
app.globalData.seller = res.result.data[0];
} else if (queryType == "courier"){
app.globalData.courier = res.result.data[0];
}
wx.navigateTo({
url: retUrl
});
} else {
wx.showToast({
icon: 'none',
title: retMgs
});
}
},
fail: err = {
wx.showToast({
icon: 'none',
title: retMgs
});
}
});
}
})
微信小程序wxs的使用（当页面数据渲染前添加js操作)
小程序的wxs功能可以让wsmxl可以调用和编写js,基本上wxs和JS无关系,只是语法形式很相似。
如下写了两个关于时间的函数，并将它们导出，
wxs module="m1"
var getMax = function(flightDate) {
var now = getDate().getDate();
var flDate = getDate(flightDate).getDate();
if( now flDate ){
return '+1';
}else{
return '';
}
}
var formartTime = function(flightDate,format){
if(flightDate){
var realDate = getDate(flightDate);
function timeFormat(num) {
return num 10 ? '0' + num : num;
}
var date = {
"Y": timeFormat(realDate.getFullYear()),
"M": timeFormat(realDate.getMonth() + 1),
"d": timeFormat(realDate.getDate()),
"h": timeFormat(realDate.getHours()),
"m": timeFormat(realDate.getMinutes()),
"s": timeFormat(realDate.getSeconds()),
"q": Math.floor((realDate.getMonth() + 3) / 3),
"S": realDate.getMilliseconds(),
};
if (!format) {
format = "yyyy-MM-dd hh:mm:ss";
}
if( format == 'hh:mm' ){
return date.h+':'+date.m;
}else{
return date.h+':'+date.m;
}
}else{
return false;
}
}
module.exports.getMax = getMax;
module.exports.formartTime = formartTime;
/wxs
可在页面添加如下使用：
m1.formartTime(）; m1.getMax(）;
怎样用js开发微信小程序
微信小程序之js
如果你想开发一款微信小程序学会微信小程序的js是必须要精通的，只要你html+css+js的基础打的好在来全力的学习微信小程序js，之后在前端开发上就没有什么问题了，但是微信js是需要花精力去学习的，可以买一本参考书或者了解下微信小程序的api都是可以快速的帮助你介入开发的队列。
怎样使用微信小程序的第三方js库？
方法一：rpn.js：使用rpn.js实现eval函数功能
操作链接：网页链接
方法二：
（1）使用Underscore.js：操作链接：网页链接
（2）使用Immutable.js：操作链接：网页链接
（3）使用UUID、Base64、Chance：操作链接：网页链接
扩展微信小程序框架功能（1）——Promise
ES6 对 Promise 有了原生的支持，但微信开发者工具更新版本（0.11.112200）后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。
扩展微信小程序框架功能（2）——Generator
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。
扩展微信小程序框架功能（3）——函数功能增强
Underscore.js 和 Lodash 是最常用的JavaScript库。
扩展微信小程序框架功能（4）——Immutable.js
Immutable.js 是 Facebook 开发的不可变数据集合。Immutable
Data（不可变数据）一旦创建就不能被修改。通过使用Immutable
Data，可以更容易的处理缓存、回退、数据变化检测等问题，应用开发更简单。
扩展微信小程序框架功能（5）——Redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
扩展微信小程序框架功能（6）—日期时间
Moment.js是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Node.js中。
扩展微信小程序框架功能（7）——正则表达式
XRegExp 是一个开源的 JavaScript库，提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库，支持附加语法、标志以及方法。
扩展微信小程序框架功能（8）——Xml处理
x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。
扩展微信小程序框架功能（9）——加解密
node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。
扩展微信小程序框架功能（10）——测试辅助
Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据，拦截 Ajax 请求。
方法三：moment
操作链接：网页链接
