微信小程序基础总结。

---

作者：michael_ouyang
来源：CSDN
原文：https://blog.csdn.net/michael_ouyang/article/details/60954907
版权声明：本文为博主原创文章，转载请附上博文链接！

• 页面跳转(保留当前页面，跳转到应用内的某个页面)：点击 changeToTest：function（）{ wx.navigateto({url:‘…/xxx/xxx’} ) }

• 页面跳转（关闭当前页面，跳转到应用内的某个页面）：点击 changeToTest：function（）{ wx.redirectTo({url:‘…/xxx/xxx’} ) }

• 页面跳转（在index.wxml页面添加一个元素，在元素里面使用属性url就可以）：点击跳转

• 页面传值

以wx.navigateTo为例：

上面讲述,wx.navigateTo传入的url是跳转的页面（使用相对路径）

wx.navigateTo({
url:“pages/home/home”
});

那么参数传递至下一页面，则只需要在路径后面，添加？问号，？后面接的是参数，以key－value的方式。

这里传了个value为2的参数

wx.navigateTo({
url:“pages/home/home?type=2”
});

然后在home.js中的onLoad()函数中得到值：option.type就可以得到了，如下：

onLoad: function (option) {
this.setData({
type:option.type,
});
console.log(option.type);
}

• 文件作用域：
  /* app.js */ App({ globalData: 1 })

/* a.js */
// 这是局部变量localValue
var localValue = 'a'
// 获取app.js的实例
var app = getApp()
// 通过app的示例来操作全局的变量
app.globalData++

/* b.js */
// 在不同的文件中可以重复定义localValue这个变量
var localValue = 'b'
// 如果a.js文件先执行，那么b.js获取到的就是a.js执行过的变量数值
console.log(getApp().globalData)

• 模块化：我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

/* common.js */
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
 
module.exports = { sayHello : sayHello}

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

/* a.js */
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
})

• wx:if和wx:for必须分开使用

wxml：

按钮

<block wx:for="{{arr}}">

    <view class="bg_black">内容：{{item}}</view>

</block>

<view class="bg_red">无内容</view>

wxss：

/index.wxss/

.bg_black {

height: 200rpx;

background: lightskyblue;

}

.bg_red {

height: 200rpx;

background: lightpink;

}

index.js：

// index.js

Page({

data: {

boolean:false,

arr: [1,2,3]

},

EventHandle: function(){

var bol = this.data.boolean;

this.setData({

  boolean: !bol

})

}

})

• 列表渲染：在数组上使用wx：for控制属性绑定一个数组。即可使用数组中各项的数据重复渲染该组件。默认数据的当前项的下标变量默认为index。数组当前项的变量默认为item。
  
  在组件内，使用属性wx:for=”{{ 数组 }}” ，数组当前项的变量名默认为item（变量需要使用双花括号）
• 选择器：内联样式：
  组件的 style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

选择器
对于常用的选择器，目前支持的选择器有：