JS动态修改样式，引用其他js里的方法，获得用户输入内rong———转

原文来自：原文地址

一：JS动态修改样式

微信小程序这个坑啊，js动态修改样式，我们并不能用js或者jq 轻轻松松一行代码搞定。或者用removeClass addClass 来修改样式。

以下是一种动态修改样式的方法，原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已。感觉有点········那个啥的，怪怪的。不过也没办法了。如果你有更好的方法，可以在评论区分享一下。

test.wxml

 

1. <view style="text-align: center;">
2. <label style="color:{{color}};">我会变色</label>
3. <button bindtap="clickRed">变红</button>
4. <button bindtap="clickgreen">变绿</button>
5. </view>

test.js

 

1. Page({
2. data: {
3. color: "red"
4. },
5. clickRed: function () {
6. this.setData({
7. color: "red"
8. })
9. },
10. clickgreen: function () {
11. this.setData({
12. color: "green"
13. })
14. }
16. })

效果： 

网友评论： 
问：我遇到一个问题，wx:for 了 100 个 view，其中有一个需要加上 .active 类，且可点击换成另一个 view 带 .active，为了使 transition 有效，又不能用 wx:if，你会怎么做呢 
答：有个比较笨的方法

 

1. <view class="first" wx:for="">
2. <view class="active"></view>
3. </view>

 

1. .first .active{}
2. .second .active{}

你可以动态的去改变 view的class 切换就可以 
问：原本想错了，可以带三目运算的， 
比如：

 

1. <view wx:for="" class="{{dateCurrent==item.id?'active':''}}"></view>

 

二：获得用户输入内容

在微信小程序里，如何获得用户输入的内容？？

 

1. js： document.getElementById("Content").value
2. jq:$("#Content").val()

在微信小程序中并不能这样写。

可以通过组件的属性 bindchange 将用户输入的储存存起来

test.wxml

 

1. <input id="postalCode" bindchange="bindChange" type="number" placeholder="输入邮政编码" auto-focus />
3. <input id="mail" bindchange="bindChange" type="number" placeholder="请输入邮箱地址" />

test.js

 

1. var inputContent = {}
3. Page({
4. data: {
5. inputContent: {}
6. },
7. bindChange: function(e) {
8. inputContent[e.currentTarget.id] = e.detail.value
9. }
10. })

后台输出 

如果你有更好的方法实现获得用户输入内容，欢迎在评论区评论

 

三：引用其他js里的方法

微信小程序中，在微信官方开发文档我们可以知道 小程序的目录结构 。

一个小程序页面由四个文件组成，一个小程序页面的四个文件具有相同路径与文件名，由此我们可知一个小程序页面对应着一个跟页面同名的js文件。可是当有些公共方法，我们想抽离出来成为一个独立公共的js文件。我们该如何实现呢。

在根目录下有一个app.js文件。这个根目录的js 文件我们可以通过getApp()轻松调用。

 

1. //app.js
3. App({
4. globaData:'huangenai'
5. })
6. 复制代码
7. //test.js
8. var app = getApp();
9. Page({
10. onLoad: function () {
11. console.log(app.globaData);
12. }
13. })

在开发者工具的 Console可以看到 

那么当一些通用的公共方法我们抽出来，在根目录下新建一个utils文件夹，新建util.js在这里我们可以将通用的方法写在这。

 

1. util.js
3. //正则判断
4. function Regular(str, reg) {
5. if (reg.test(str))
6. return true;
7. return false;
8. }
10. //是否为中文
11. function IsChinese(str) {
12. var reg = /^[\u0391-\uFFE5]+$/;
13. return Regular(str, reg);
14. }
16. module.exports = {
17. getRequestUrl: "http://localhost:59637",//获得接口地址
18. IsChinese: IsChinese,
19. }

//test.js

 

1. var util = require('../../utils/util.js');
2. Page({
3. onLoad: function () {
4. console.log("判断是否为中文:"+util.IsChinese('测试'));
5. console.log("输出接口url："+util.getRequestUrl);
6. }
7. })

在开发者工具的 Console可以看到 

注意了，在util.js里的 Regular（）方法，我们不可以这样调用util.Regular()，因为我们没有用 module.exports 来暴露模块接口

如果直接 调用则会出现这样的错误

 

1. thirdScriptError
2. util.Regular is not a function;at "pages/test/test" page lifeCycleMethod onLoad function
3. TypeError: util.Regular is not a function