微信小程序js上下文,微信小程序appjs

本文目錄一覽：

• 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

操作鏈接：網頁鏈接