Vue小程序
Posted 龖龖龖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue小程序相关的知识，希望对你有一定的参考价值。
Vue小程序介绍
微信小程序
简称小程序
英文名 Mini Program ，
是一种不需要下载安装即可使用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可打开应用
为什么要有微信小程序？
1、微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户;
2、推广app或公众号的成本太高。
3、开发适配成本低。
4、容易小规模试错，然后快速迭代。
5、跨平台。
注意：在微信小程序中一定要注意内存泄漏的问题，不然会造成小程序闪退，所以一定要及时清空事件监听和定时器还有闭包
一、生命周期函数
代码如下（示例）：
// pages/appIndex/appIndex.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
* 一般情况下，在这个地方获取用户个人微信信息
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
* 此时应用被用户看到，页面重置
* 倒计时 59s 重置
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
* 当小程序被隐藏的时候，暂停或者销毁定时器
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 当应用代码发生错误时触发
* 获取错误信息传递给后台服务器
*/
onError: function (err) {
},
/**
* 当页面找不到的时候就会触发
* 当应用第一次启动时，如果找不到第一个入口文件就会触发
*/
onPageNotFound: function (err) {
//场景：如果页面不存在，通过js方式来重新跳转页面或者重新导航到第二个首页
},
/**
* 未处理的promise 拒绝事件监听函数
*/
onUnhandledRejection: function () {
//(new Promise().then(res=>{}))
},
/**
* 监听系统主题变化
*/
onThemeChange: function () {
//系统主题 当微信切换主题模式的时候，小程序也跟着切换主题
},
})
二、传参方式
1、子传父
子组件代码如下（示例）：
components/xxx文件夹/xxx.wxml中写
//子组件 定义的add事件
<view wx:for="{{list}}" wx:key="id" bindtap="add" data-active-id="{{item.id}}"
//判断数据中的flag为true时设置class为active的样式否则无样式
class="tabs_title_item {{item.flag?'active':''}}">
{{item.name}}
</view>
components/xxx文件夹/xxx.js中写
/**
* 组件的属性列表
*/
properties: {
//从父组件传递过来的参数 语法规则
list: {
type: Array,//数据类型
value: [],//数据存储方式
}
},
/**
* 组件的方法列表
*/
methods: {
add(e) {
console.log('子组件', e);
let { activeId } = e.currentTarget.dataset;
//itemClick 是定义的事件名
this.triggerEvent("itemClick", { activeId })
}
},
父组件代码如下（示例）：
pages/xxx文件夹/xxx.wxml中写
// bind+itemClick（是从子组件传递过来的事件名）
<tab list="{{list}}" binditemClick="add">
<view wx:if="{{list[0].flag}}">模拟器</view>
<view wx:elif="{{list[1].flag}}">编辑器</view>
<view wx:elif="{{list[2].flag}}">调试器</view>
<view wx:else>可视化</view>
</tab>
pages/xxx文件/xxx.js中写
add(e) {
console.log("父组件", e);
let { activeId } = e.detail;
let { list } = this.data;
list.forEach(item => item.flag = item.id === activeId)
console.log(list);
this.setData({
list
})
},
以上是关于Vue小程序的主要内容，如果未能解决你的问题，请参考以下文章