關於微信小程序jsdata的信息

本文目錄一覽：

• 1、微信小程序怎麼在js中獲取定義在page data里的值
• 2、微信小程序javascript修改data值的問題
• 3、微信小程序如何獲取javascript 里的數據
• 4、微信小程序怎麼在js中獲取定義在page data里的值？
• 5、微信小程序（上）

微信小程序怎麼在js中獲取定義在page data里的值

方法：獲取page數據,看代碼：var text=this.data.name  ，這樣就獲取到初始化的值

page({

data:{name:”test”},

showData:function(){

var text=this.data.name

}

})

示例如下：

util.js

//正則判斷

function Regular(str, reg) {

if (reg.test(str))

return true;

return false;

}

//是否為中文

function IsChinese(str) {

var reg = /^[\u0391-\uFFE5]+$/;

return Regular(str, reg);

}

module.exports = {

getRequestUrl: “”,//獲得接口地址

IsChinese: IsChinese,

}

//test.js

var util = require(‘../../utils/util.js’);

Page({

onLoad: function () {

console.log(“判斷是否為中文:”+util.IsChinese(‘測試’));

console.log(“輸出接口url：”+util.getRequestUrl);

}

})

微信小程序javascript修改data值的問題

是的，只要點擊了複選框之後，對應點擊的位置的checked的值就變為相反

微信小程序如何獲取javascript 里的數據

微信小程序 獲取javascript 里的數據

wxml如何獲取js里的數據

例：

wxml里：

text id=”twl”{{txt}}/text

通過上面的{{txt}}可以對應獲取js里data下定義的txt的值

js里：

data: { txt:{} }

首先在data里定義一個“容器”txt：{}，{}內為空代表是從別的地方傳值進去，當然{}里也可以直接寫數據，如txt：{‘123′}，上面的wxml獲取了就相當於 text id=”twl”123/text；通過其他方法傳值到容器里用一個this.setData({})的方法，如：

onLoad: function (options) { var ta=options.kind; this.setData({ txt:ta, }) },

這樣上面data里定義的txt的值就是ta的值了。

Tips:小程序一定要用https

微信小程序怎麼在js中獲取定義在page data里的值？

方法：獲取page數據,看代碼：var text=this.data.name  ，這樣就獲取到初始化的值

page({

data:{name:”test”},

showData:function(){

var text=this.data.name

}

})

示例如下：

util.js

//正則判斷

function Regular(str, reg) {

if (reg.test(str))

return true;

return false;

}

//是否為中文

function IsChinese(str) {

var reg = /^[\u0391-\uFFE5]+$/;

return Regular(str, reg);

}

module.exports = {

getRequestUrl: “”,//獲得接口地址

IsChinese: IsChinese,

}

//test.js

var util = require(‘../../utils/util.js’);

Page({

onLoad: function () {

console.log(“判斷是否為中文:”+util.IsChinese(‘測試’));

console.log(“輸出接口url：”+util.getRequestUrl);

}

})

微信小程序（上）

註冊開發者賬號：

安裝小程序開發工具：

創建項目

pages目錄：用於存放所有的頁面。

utils目錄：用於存放工具類文件。

app.js：是入口文件，程序在運行時，首先要執行該文件。

app.json：是全局配置文件，用於配置小程序的信息（它裡面配置的是全局信息）。

app.wxss：是全局樣式文件。全局樣式文件裡面定義的選擇器，在所有的頁面中生效。

project.config.json：是項目配置文件。

sitemap.json：是SEO配置文件，方便用戶搜索到該小程序。

（1）pages配置項

pages裡面註冊的是視圖。用於指定小程序由哪些頁面組成，每一項都對應一個頁面的路徑（含文件名）信息

（2）window配置項

window 是全局窗口配置。

backgroundTextStyle 設置文本樣式（下拉loading的樣式），僅支持 dark / light。

navigationBarBackgroundColor 設置導航欄背景。

navigationBarTitleText 設置導航欄文本。

navigationBarTextStyle 設置導航欄標題顏色，僅支持 black / white。

（3）style

style 設置樣式級別，默認是v2。

（4）sitemapLocation

sitemapLocation 指明sitemap.json 的位置；默認為 ‘sitemap.json’ 即在 app.json 同級目錄下名字的 sitemap.json 文件。

每一個頁面由四個文件組成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。

（1）xxx.wxml文件

xxx.wxml文件，就相當於一個html文件。在wxml文件中，不能寫傳統的html標籤，只能寫微信提供的組件。

① view組件

相當於div標籤。

② text組件

相當於span標籤。

③ swiper

swiper是滑塊視圖容器，它裡面只能放swiper-item組件。

swiper組件的常用屬性：

circular是銜接滑動

autoplay是自動切換

interval是自動切換時間間隔

indicator-dots是否顯示面板指示點

indicator-color指示點顏色

indicator-active-color當前選中的指示點顏色

④ image

image是圖片組件，最好全部採用網絡圖片，因為小程序的總體積不允許超過2MB。

（2）xxx.wxss文件

xxx.wxss文件，就相當於一個css文件。在wxss文件中，最好不要寫標籤選擇器和id選擇器，統一寫類選擇器。

為了讓小程序裡面的內容在各種設備上能夠自適應顯示，微信推出了響應式單位：rpx。在iphone6中，2rpx=1px。

（3）xxx.js文件

xxx.js文件，是交互文件（核心文件）。

Page()函數，返回頁面對象，該函數需要傳一個配置參數，這個配置參數是一個對象。在這個配置對象中，定義當前頁面的所有內容。

① data

定義頁面的數據。

② 自定義函數

開發者可以添加任意的函數或數據到Object 參數中，在頁面的函數中用this可以訪問。

（4）xxx.json文件

xxx.json文件，是頁面的配置文件（它裡面配置的是當前頁面信息）。

WXML 中的動態數據均來自對應 Page 的 data。

（1）獲取data中數據

通過插值表達式{{}}，可以顯示js裡面定義的data裡面的數據。

（2）組件屬性(需要在雙引號之內)

（3）運算

可以在{{}} 內進行簡單的運算。

① 三元運算

② 邏輯判斷

bindtap是觸屏事件，其實就是相當於網頁中的點擊事件。

小程序中bindtap綁定方法時不能傳參數。所以組件通過data-xxx傳遞數據。

注意： 自定義屬性的命名用駝峰或者大寫命名，小程序內部會自動轉成小寫。

8、setData()方法

setData()方法，更新頁面中數據。頁面數據更新後，調用setData()方法重新渲染到頁面。

wx:for指令用於循環數組數據，生成組件。

循環出來的每一項通過item返回，每一項對應的索引，通過index返回。

wx:key=””，設置每一項唯一的標識。循環列表時，添加wx:key的好處是，將來列表發生變化時重新渲染列表的損耗為更低。

條件渲染可以使用wx:if或hidden。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

wx:if用於條件渲染：條件為真生成裡面的內容，條件為假不會生成裡面的內容。（每次重新生成內容）

也可以用wx:elif 和 wx:else 來添加一個 else 塊。

hidden用於條件渲染：條件為真隱藏裡面的內容，條件為假顯示裡面的內容。（每次切換樣式）

在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。

color：tab上的文字默認顏色，僅支持十六進制顏色。

selectedColor：tab上的文字選中時的顏色，僅支持十六進制顏色。

backgroundColor：tab的背景色，僅支持十六進制顏色。

borderStyle：tabbar上邊框的顏色， 僅支持 black / white。

position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。

custom：自定義tabBar。

（2）list

list：tab的列表。

list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。

pagePath：頁面路徑，必須在pages 中先定義。

text：tab 上按鈕文字。

iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。

（1）跳轉普通頁面

方法① navigator組件

方法② navigateTo()方法

navigateTo()方法，用於跳轉普通頁面。

（2）跳轉tabBar頁面

方法① navigator組件

如果要使用navigator組件跳轉tabBar頁面，需要設置open-type=”switchTab”。

方法② switchTab()方法

switchTab()方法，用於跳轉tabBar頁面。

title：提示的標題

content：提示的內容

success：接口調用成功的回調函數。回調函數中的confirm屬性返回true，表示點擊的是確定按鈕，否則是取消按鈕。

title：提示的內容

icon：圖標

duration：消息提示框的顯示時間

mask：是否顯示透明蒙層，防止觸摸穿透

模塊化語法有兩種：① commonjs規範，② es6規範。

nodejs環境採用的就是commonjs規範。採用exports 或 module.exports 導出成員，採用require() 導入成員。

微信小程序支持commonjs規範，同時還支持官方的ES6規範。ES6規範採用export 導出成員，採用import 導入成員。

將封裝的方法放到util目錄下的js文件中。可以新建js文件，也可以寫在直接util.js文件中。

（1）確認框方法

定義確認框方法，並導出

（2）消息框方法

定義消息框方法，並導出

（3）獲取事件參數的方法

import是ES6的導入語句。

wx對象是微信小程序的全局對象，在任何地方都可以使用。

（1） 註冊語句

（2） 在app.js入口文件中導入

注意： 註冊給wx對象的方法，需要在app.js文件中導入，才可使用。

（3） 調用方法

wx.方法名(參數)