小程序中的JS

JavaScript018

小程序中的JS,第1张

1、小程序不是运行在浏览器中,所以没有DOM和BOM对象

2、小程序的JS有一些额外的成员

App方法 用于定义应用程序实例对象

Page方法 用于定义页面对象

getApp方法 用于获取全局应用程序对象

getCurrentPages方法 用来获取当前页面的调用栈(数组 最后一个就是当前页

wx对象 用来提供核心api的 官方链接: https://developers.weixin.qq.com/miniprogram/dev/api/

3、小程序JS是支持CommonJS规范的

eg:

./utils/foo.js文件

function say(msg){

    console.log("hello"+msg)

}

module.exports = {

    say:say

}

app.js文件

const foo = require("./utils/foo.js")

foo.say("hi")

微信小程序实例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.postIdwx.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.payvar targetQueryType = e.currentTarget.dataset.indexif (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})}})}})

方法一: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

操作链接:网页链接