微信小程序基础

微信小程序的四个文件

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

传值方式

事件传值

`.wxml文件`
<button bindtap='fun' data-value='{{data}}'>点击</button>
`在.js文件`
fun(e){
  console.log(e.currentTarget.dataset)
}

路由传值

wx.navigateTo({
  url: "/pages/xin/xin?key=" + data,
});
wx.navigateTo({
  url: `/pages/xin/xin?key=${data}`,
});

// 在 xin.js文件的onLoad生命周期中接收
onLoad(options){
  console.log(options)
}

组件传值

父传子

// parent.wxml
// 在子组件上绑定一个自定义属性值
<movie-list name={{ name }}></movie-list>;

// child.js
// 子组件接收属性值
// 在标签里使用  {{name}}
// 在js中使用  this.properties.name
Component({
  properties: {
    name: {
      type: String,
      value: "小明", // 默认值
    },
  },
});

子传父

//child.wxml
<view>
  <button bindtap="changeName">传值给父级</button>
</view>;

// child.js
Component({
  changeName() {
    this.triggerEvent("changeName", {
      name: "李四",
    }); // triggerEvent事件有三个参数  第一个是方法名 第二个是数据 第三个是是否冒泡
  },
});

// parent.wxml
<movie-list name={{name}} bindChangeName="changeName"></movie-list>
// parent.js
changeName(event){
  console.log(event.detail)  // { name:'李四' }
}

本地缓存传值

wx.setStorage(key, value); // 异步本地存储
wx.setStorageSync(key, value); // 同步本地存储
wx.getStorageSync(key); // 同步获取值
wx.getStorage({ key: key, success(res) {} }); // 异步获取
wx.clearStorageSync(key); // 删除同步缓存
wx.clearStorage(object); // 异步清除本地数据缓存
wx.removeStorageSync(key); //同步删除指定的key的值
wx.removeStorage(object); // 异步删除指定的key的值
wx.getStorageInfo(object); // 异步获取当前storage的相关信息
wx.getStorageInfoSync(object); //同步获取当前storage的相关信息

获取全局变量或方法

获取全局函数

// App.js 中声明一个全局函数
App({
  requestPostData: function (num, callback) {
    // 这个函数被声明为全局函数
    num = num + 1;
    callback(num);
  },
});

const app = getApp(); // 获取全局函数的方法 getApp()
// 在需要调用的页面使用
app.requestPostData(this.data.num, function (data) {
  this.setData({ num: data });
});

获取全局变量

//app.js
App({
  //全局数据加在app.js的globalData里
  globalData{
    historyArr:'我是一个全局数据'
  }
})

// 使用
const app = getApp();
let historyArr = app.globalData.historyArr;

事件绑定

冒泡事件/点击事件

<button bindtap="fun">点击</button>

阻止冒泡

<button catchtap="btnFun">点击</button>

wx:for

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

默认是 item
wx:for-item='listItem'

下拉刷新页面

自定义事件

detail

触摸事件

touches changedTouches

自定义的配置 （配置在 app.json 中）

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

路由跳转

标签式跳转

<navigateTo url="地址" open-type="跳转方式"></navigateTo>

open-type

值	说明
navigate	对应[wx.navigateTo ]或 [wx.navigateToMiniProgram]的功能
redirect	对应 [wx.redirectTo] 的功能
switchTab	对应 [wx.switchTab] 的功能
reLaunch	对应 [wx.reLaunch] 的功能
navigateBack	对应 [wx.navigateBack] 的功能
exit	退出小程序，target="miniProgram"时生效

使用限制

1. 每个小程序可跳转的其他小程序数量限制为不超过10个
2. 如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过10 个，否则将无法通过审核。
3. 该名单可在发布新版时更新，不支持动态修改。
4. 调用此接口时，所跳转的 appId 必须在配置列表中，否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList。
5. 配置方法详见 配置 (opens new window)

{
 "navigateToMiniProgramAppIdList": [ // 不能超过是个，否则审核不通过
    "wxe5f52902cf4de896"
  ]
}

6. 需要用户确认跳转 从 2.3.0 版本开始，在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel

关于调式

• 在开发者工具上调用此 API 并不会真实的跳转到另外的小程序，但是开发者工具会校验本次调用跳转是否成功。详情 (opens new window)
• 开发者工具上支持被跳转的小程序处理接收参数的调试

编程式跳转

1. wx.navigateTo(Object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

1. wx.switchTab(Object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack(Object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。在小程序插件中使用时，只能在当前插件的页面中调用

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.reLaunch(Object object)

**关闭所有页面，打开到应用内的某个页面**

小程序跳转

wx.navigateToMiniProgram(Object) 打开另一个小程序

wx.navigateToMiniProgram({
  appId: "wxe5f52902cf4de896",
  path: "page/index/index?id=123", // 如果为空则打开首页
  extraData: {
    // 传递过去的数据
    foo: "bar",
  },
  envVersion: "release", // 版本
  success(res) {
    // 回调成功
    // 打开成功
  },
  fail() {
    // 失败
  },
});

使用限制

看官网 (opens new window)

wx.navigateBackMiniProgram(Object) 返回到上一个小程序
只有在当前小程序是被其他小程序打开时可以调用成功
注意： 微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持

wx.navigateBackMiniProgram({
  extraData: {
  foo: 'bar' //返回给上一个小程序的数据
},
success(res) {
  // 返回成功
}
})

路由传参

wx.navigateTo({
  url: `/pages/about/about?data=${data}&id=${id}`,
});
reLaunch & redirectTo 能够传参
switchTab 不能传参

小程序生命周期函数

onLoad() ：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow() ：页面显示/切入前台时触发
onReady() ：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide() ：页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload() ：页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

用户下拉刷新

第一种：配置下拉刷新

1. 在需要下拉刷新页面的配置文件.json文件中进行配置（页面配置会覆盖全局配置）

{
  "enablePullDownRefresh": true // 开启下拉刷新
}

2. 在.js文件中的生命周期进行监听

Page({
  // 监听用户下拉刷新事件
  onPullDownRefresh() {
    setTimeout(() => {
      console.log("我刷新了");
      wx.stopPullDownRefresh(); // 停止刷新
    }, 2000);
  },
});

第二种：事件触发下拉刷新

	methods: {
    // 1. 开启下拉刷新
			change(){
				uni.startPullDownRefresh()
			}
  }
  // 2. 监听下拉刷新
  onPullDownRefresh() {
    setTimeout(()=>{
      console.log('我刷新了')
      wx.stopPullDownRefresh() // 停止刷新
    },2000)
  }

用户上拉触底事件

在触发距离内滑动期间，本事件只会被触发一次。

1. .json文件配置

{
  "onReachBottomDistance": 50 // Number
}

2. .js文件进行监听

onReachBottom() {
			console.log('到底了')
}