wxml文件為什麼沒有顏色

❶ 小程序怎麼寫點擊按鈕時變色,松開後恢復原來的顏色

小程序的點擊事件里，有對應的方法。
bindtouchstart="handleTouchStart" //按下未松開
bindtouchend="handleTouchEnd" //松開
再寫出你想要的操作就行了

❷ 微信小程序的.wxml文件提示錯誤，有大佬能幫看下怎麼改嗎

應該是多了一個</view>把最後一個刪除了就可以，https://e.csdn.net/course/detail/8456

❸ 這個為什麼渲染不到前端wxml文件

wxml應該這樣寫：
<view wx:for="{{fileList}}">
<view>{{item.get}}</view>
</view>
即子項應該包含在循環框架內

❹ 微信小程序影響的行業，准備好了嗎

微信小程序申請前的准備：
首先，你需要注冊一個小程序賬號。需要用一個沒注冊過公眾號的郵箱注冊。注冊過程中需要很多認證，比較繁瑣。如果暫時只是試水、沒有發布的打算，那麼只要完成基本信息填寫就可以，不需要完成微信認證。
之後，就可以在公眾平台使用注冊的帳戶進行登錄。
然後，在主頁面左邊列表中點擊設置，再設置頁面中選開發設置，就可以看到AppID。而AppID 可以用於在開發工具中進行登記，使用開發工具的高級功能。你可以到官網下載開發工具。
開始項目：
打開開發者工具，選擇小程序選項，然後直接點擊「添加項目」按鈕。我們可以在這個步驟，填入剛才注冊的時候使用的 AppID。
如果項目目錄中的文件是個空文件夾，會提示是否創建 quick start 項目。
選擇「是」，開發者工具會幫助我們在開發目錄里生成一個簡單的 Demo。
這個 Demo 擁有一個完整的小程序的大概框架。
1. 框架
我們首先看一下官方提供的 Demo 含有的目錄：
app.js：小程序邏輯、生命周期、全局變數。
app.json：小程序公共設置、導航欄顏色等，不可以注釋。
app.wxss：小程序公共樣式，類似 CSS 。
小程序頁面構成類似這樣：
每一個小程序頁面是由同路徑下同名的四個不同後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json
微信小程序中的每一個頁面的路徑和頁面文件名，都需要寫在app.json的pages中，且pages數組中的第一個頁面是小程序的首頁。
這四個文件按照功能可以分成三個部分：
配置：json 文件
邏輯層：js 文件
視圖層：wxss.wxml 文件
在 iOS 上，小程序的邏輯代碼運行於 JavaScriptCore 中，而在 Android上，這個任務則是交給 X5 內核來完成。
在 開發工具上， 小程序的 JavaScript 代碼是運行在 NW.js（Chrome 內核） 中。這也導致開發工具上的效果跟實際效果有所出入。

❺ 微信小程序開發文檔有哪些類型

一個微信小程序最多關聯5個服務類目，一個月內可申請修改3次。

類目資質：小程序對一些服務類目的資質要求比公眾號多，甚至高於APP發布，不要試圖關聯無資質要求的類目A，卻跨界做了類目B的事情無法上線或被下線。

一些資質提示：

• 互聯網軟體和服務：一些類目要求兩證二選一：《增值電信業務經營許可證》，《電信與信息服務業務經營許可證》，對於創業企業和中小團隊會是門檻。

• 生活服務/工具類目：比較開放，對特殊資質無要求。

• 社交類目：普遍要求兩證選一：《增值電信業務經營許可證》，《電信與信息服務業務經營許可證》，很多應用服務即便不是純社交，但若帶有社交屬性，要特別注意審核規則。

• 富媒體類目：內容形式與相關資質要求，內容創業和內容服務需要關注，比公眾號資質要求多。

• 電商/店鋪：商家自營線上和線下店鋪，除食品保健等既有資質，無其它特殊要求；但是對平台電商要求兩證選一《增值電信業務經營許可證》，《電信與信息服務業務經營許可證》。

• 醫療/金融業類目：既有的行業管制和資質，小程序也有相關審核要求。

• 
  

❻ 小程序開發有哪些坑

1. JSON 配置文件小程序中，包含唯一的全局配置文件app.json，以及每個頁面的配置文件page.json。每單頁頁面相應的 JSON 文件會覆蓋與app.json相同的配置項。如下，是一個包含了所有配置選項的簡單配置app.json。"pages": [ //設置頁面的路徑"pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合"pages/logs/logs"],"window": { //設置默認窗口的表現形式

"navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色
"navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white
"navigationBarTitleText": "微信介面功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll": true, // 設置true不能上下滾動，true/false，注意！只能在 page.json 中有效，無法在 app.json 中設置該項。},"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
"list": [{ //設置tab的屬性，最少2個，最多5個
"pagePath": "pages/index/index", //點擊底部 tab 跳轉的路徑
"text": "首頁", //tab 按鈕上的文字
"iconPath": "../img/a.png", //tab圖片的路徑
"selectedIconPath": "../img/a.png" //tab 在當前頁，也就是選中狀態的路徑
}, { "pagePath": "pages/logs/logs", "text": "日誌"
}], "color": "red", //tab 的字體顏色
"selectedColor": "#673ab7", //當前頁 tab 的顏色，也就是選中頁的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //邊框的顏色 black/white
"position": "bottom" //tab處於窗口的位置 top/bottom
},"networkTimeout": { //默認都是 60000 秒一分鍾
"request": 10000, //請求網路超時時間 10000 秒
"downloadFile": 10000， //鏈接伺服器超時時間 10000 秒
"uploadFile": "10000", //上傳圖片 10000 秒
"downloadFile": "10000" //下載圖片超時時間 10000 秒
},"debug": true //項目上線後，建議關閉此項，或者不寫此項

2. JS 邏輯層

小程序的邏輯層由 JavaScript 語言完成。但因為小程序不在瀏覽器中運行，所以 JS 在 web 瀏覽器中的一些函數不能用，如document、window等。

app.js有全局的小程序生命周期，page.js有自己本頁面的生命周期。

2.1 注冊小程序app.js

這一步驟，有這幾個需要注意的地方：

• 必須在app.js中，使用app()函數注冊微信小程序。全局小程序中，只能注冊一次；

• 不能在app()內的函數中調用getApp()（小程序實例），使用this就可以拿到小程序的實例；

• 不要在onLaunch的時候getCurrentPage()，因為此時page還沒有生成；

• 通過其他子頁面調用getApp()獲取實例後，不要私自調用小程序全局的生命周期方法；

• 可以通過var app=getApp()獲取小程序的實例。

• app ( { // 小程序生命周期的各個階段


• onLaunch: function(){},//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）


• onShow: function(){},//當小程序啟動，或從後台進入前台顯示，會觸發 onShow


• onHide: function(){},//當小程序從前台進入後台隱藏，會觸發 onHide


• onError: function(){},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息


• // 自定義函數或者屬性，用 this可以訪問


• ...


• })



2.2 注冊小程序的頁面page.js

Page()用來注冊一個頁面，維護該頁面的生命周期以及數據。

• Page({ data: { //頁面的初始數據//調用：{{text}} {{array[0].msg}}


• text: 'init data', array: [{ msg: '1'


• }, { msg: '2'


• }]


• }, // 頁面生命周期的各個階段


• onLoad: function () {}, //生命周期函數--監聽頁面載入


• onShow: function () {}, //生命周期函數--監聽頁面初次渲染完成


• onReady: function () {}, //生命周期函數--監聽頁面顯示


• onHide: function () {}, //生命周期函數--監聽頁面隱藏


• onUnload: function () {}, //生命周期函數--監聽頁面卸載


• onPullDownRefresh: function () {}, //頁面相關事件處理函數。如果需要監聽用戶下拉動作，需要 在app.json中配置 "enablePullDownRefresh":"true" 允許上拉刷新


• onReachBottom: function () {}, //頁面上拉觸底事件的處理函數


• onShareAppMessage: function () { //用戶點擊右上角分享


• return { title: '自定義分享標題', desc: '自定義分享描述', path: '/page/user?id=123'


• }


• }, // 自定義函數或者屬性如：


• customData: { hi: 'MINA'


• }...


• })



2.3 公共模塊util.js

公共模塊方法需要通過mole.exports對外暴露介面，使用的時候需要利用require(path)，將文件引入。如：

• function sayHello(name) {//公共方法util類


• console.log(`Hello ${name} !`)


• }mole.exports.sayHello = sayHello//用mole.exports 對外暴露介面


• //先引入文件，是新建的一個 utils 包，公共方法在 util.js 裡面var util = require('../../utils/util.js')


• Page({//調用類


• onLoad: function () {// 使用時，用 util 引用名調用，如：util.sayHello()


• util.sayHello('我是傳的值');


• }


• })



2.4 數據操作

setData()不能直接操作數據，例如this.data.text="xxxxx"就是錯誤的。你需要在this.setData ()之中，進行數據的操作。

同時，這里有作用域的問題。比如，需要在局部函數中使用，就需要.bind(this)。

如果你需要操作全局的數據，你需要在 app.js 中進行相應設置，例如：

• App({// app.js


• globalData: 1})// 某 page.jsconsole.log(getApp().globalData)



3. 視圖層 WXML

視圖層的數據綁定均來自於Page中的data，想要修改相應值，你需要用到this.setData。數據綁定使用兩對花括弧，將變數名包起來。

3.1 條件渲染

你可以利用if和else，在視圖層上編寫在特定情況下，出現的不同的視圖結果。

• <view wx:if="{{zhenjiaa=='123'}}">123334</view><view wx:if="{{zhanjia}}">123334</view><view wx:if="{{len > 5}}">大於5我就顯示了 </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view><block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>



很多人會將 CSS 中的display: hidden屬性，將其做一個比較。

• 微信小程序中的wx:if是惰性的。如果不符合渲染條件，它不會渲染相應部分；

• 使用display: hidden時，元素始終渲染，只是視圖層上沒有顯示，用戶看不見。

如果你的小程序有元素顯示頻繁切換的需求，建議你使用display: hidden，能夠為用戶提供能順暢的使用體驗。

3.2 列表渲染

相當於讓 WXML 處理一個循環。

在 WXML 中，你可以這樣來建立一個 for 循環：

<view wx:for="{{array}}"> {{index}}:{{item}} </view>

然後在相應的 JS 中，新建一個數組：

• page.jsPage({ data: {


• array: [1, 2, 3, 4, 5]


• }


• })



需要注意的是，如果列表中的項需要動態添加到列表中，並希望項目保持原有的特徵和狀態，那麼你應該使用wx:key。

wx:key有兩種形式：

• 字元串：wx:key="unique"

• 保留關鍵字：wx:key="*this"

3.3 運算

WXML 可以執行簡單的運算任務。例如：

<view> {{a + b}} + {{c}} + d </view>

也可以做到字元串拼接：

<view>{{"hello" + name}}</view>

甚至，你可以使用...在 WXML 中展開對象。

3.4 模板

name定義組件模版的名稱，引用模版的時候使用is屬性指定模版的名字，is可以進行簡單的三目運算，需要傳入模版需要的data數據。

因為模版擁有自己的作用域，所以只能使用 data 傳入數據，而不接受雙花括弧的寫法。

• <template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template><!-- 其他代碼 --><template is="msgItem" data="{{...item}}"/>



3.5 公共模塊的引用

WXML 提供import和include兩種文件引用方式。

import有作用域的概念，不能多重引用。

• <!-- B.wxml --><import src="a.wxml"/><!-- A.wxml --><template name="A">


• <text> A template </text></template>



而include就可以多重引用了。

• <!--引用 header、其中 header.wxml 中也引用了 footer.wxml--><include src="header.wxml"/><view> body </view><!-- header.wxml --><view> header </view><include src="footer.wxml"/>



3.6 事件

名稱以bind開頭的事件不阻止冒泡，名稱以catch開頭的事件冒泡是阻止的。如bindTap和catchTab。

在 WXML 中，可以使用dataset定義data中的數據，會通過事件傳遞。它的事件以data-開頭，多個單詞以-鏈接，如data-a-b。

需要注意的是，使用這種方式定義的變數不能有大寫。它會自動轉成駝峰命名，調取的時候去駝峰命名的名字。

4. WXSS

WXSS 的用法類似於 CSS，並在 CSS 的基礎上，擴展了 rpx 尺寸單位和樣式導入功能。

WXSS 可以使用內聯樣式，但這樣會影響渲染速度。

每個頁面自己的page.wxss樣式表，會覆蓋全局樣式表app.wxss。

❼ [求助]微信小程序二維數組在wxml中列表渲染

這個問題，如果條件允許，最好在後台程序中解決，在後台讀取出圖片路徑數據後，立刻就分割為數組，然後把所有數據按json格式返回給小程序，小程序再把它放入page的data中，這樣小程序無須大的改動就能顯示圖片了。
如果這個辦法行不通，也可以在小程序獲得後台返回的json數據後，先把其中的圖片路徑數據（即用：分隔的多個圖片路徑的字元串）用split分割為數組，再放入page的data中，這樣小程序的wxml文件也不需要大改就能顯示多個圖片了。
如果實在懶得很，後台返回的數據一股腦的直接放到page的data中，那麼還有最後的一種解決辦法，就是在wxml文件中通過小程序自身的wxs語言實時分割路徑字元串，比如（假定圖片欄位名為image）：

<wxs mole="fun"> mole.exports = { imgPathSplit: function(s) { if (s) return s.split(":"); } }</wxs>

然後在需要循環顯示圖片的地方加入代碼（只是示例）：

<image wx:for="{{fun.imgPathSplit(item.image)}}" wx:key="*this" mode="aspectFill" src="{{item}}"></image>

這樣，在小程序渲染頁面時就會實時對路徑字元串進行分割，再循環顯示出圖片來。

❽ 微信開發者工具調試器wxml欄修改完css怎麼保存

你直接在這里改，肯定是不行的啦，就好像你要調樣式，在瀏覽器里調一樣

你得在左邊列表找到你的wxss,才行呀

❾ 微信小程序怎麼搞的

微信小程序申請前的准備：

首先，你需要注冊一個小程序賬號。需要用一個沒注冊過公眾號的郵箱注冊。注冊過程中需要很多認證，比較繁瑣。如果暫時只是試水、沒有發布的打算，那麼只要完成基本信息填寫就可以，不需要完成微信認證。

之後，就可以在公眾平台使用注冊的帳戶進行登錄。

然後，在主頁面左邊列表中點擊設置，再設置頁面中選開發設置，就可以看到AppID。而AppID 可以用於在開發工具中進行登記，使用開發工具的高級功能。你可以到官網下載開發工具。

開始項目：

打開開發者工具，選擇小程序選項，然後直接點擊「添加項目」按鈕。我們可以在這個步驟，填入剛才注冊的時候使用的 AppID。

如果項目目錄中的文件是個空文件夾，會提示是否創建 quick start 項目。

選擇「是」，開發者工具會幫助我們在開發目錄里生成一個簡單的 Demo。

這個 Demo 擁有一個完整的小程序的大概框架。

1. 框架

我們首先看一下官方提供的 Demo 含有的目錄：

app.js：小程序邏輯、生命周期、全局變數。

app.json：小程序公共設置、導航欄顏色等，不可以注釋。

app.wxss：小程序公共樣式，類似 CSS 。

小程序頁面構成類似這樣：

每一個小程序頁面是由同路徑下同名的四個不同後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json

微信小程序中的每一個頁面的路徑和頁面文件名，都需要寫在app.json的pages中，且pages數組中的第一個頁面是小程序的首頁。

這四個文件按照功能可以分成三個部分：

配置：json 文件

邏輯層：js 文件

視圖層：wxss.wxml 文件

在 iOS 上，小程序的邏輯代碼運行於 JavaScriptCore 中，而在 Android上，這個任務則是交給 X5 內核來完成。

在 開發工具上， 小程序的 JavaScript 代碼是運行在 NW.js（Chrome 內核） 中。這也導致開發工具上的效果跟實際效果有所出入。

2. 組件

微信提供了許多組件，主要分為八種:

這其中，包含了view、scroll-view、button、form等普通常用的組件，也提供了地圖mapcanvas

組件主要屬於視圖層，通過 WXML 來進行結構布局，類似於 HTML。樣式則通過 WXSS 來定義和修改，它的語法和使用都近似 CSS。

組件使用語法實例：

<><>

3. API

網路

媒體

數據

位置

設備

界面

開發介面

網路請求介麵包含了普通的 HTTPS 請求，支持上傳、下載、Socket，基本上滿足了我們開發中所需要的網路需求。

這些 API 屬於邏輯層，寫在 JS 邏輯文件中。

使用實例：

wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })

可以到官方文檔 – API 查看其它 API 的使用方法。

編譯運行

1. 模擬器調試

我們可以在微信提供的開發者工具中，使用模擬器查看小程序運行的效果。

之前我們提過，小程序的運行底層不同，這也導致在模擬器上的效果，會與在手機上運行有些差異。

2. 真機調試

在左邊的選項欄中，選擇項目，然後點預覽會生產一個二維碼，用管理員微信號掃一掃，就可以在真機上看實際效果。

❿ HBuilder可以打開.wxml後綴的代碼文件嗎

可以，打開HBuilder->工具->選項->編輯器->文件關聯->點擊「文件類型」旁邊的「添加」
->在彈窗框輸入 *.wxml 點擊確定->再點擊「相關聯的編輯器」旁邊的「添加」->
選擇「HTML Editor」點擊確定，再次打開.wxml頁面就可以看到頁面有高亮效果了