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页面就可以看到页面有高亮效果了