collapse 微信小程序_微信小程序总结
一.静态部分
1.标签及其组件
方法一
1.下载有赞ui库，将其中的dist文件移入到我们的项目中
在app.json文件中的"usingComponents"中将dist中所有的组件引入
"usingComponents": {
"van-action-sheet": "./dist/action-sheet/index",
"van-area": "./dist/area/index",
"van-badge": "./dist/badge/index",
"van-badge-group": "./dist/badge-group/index",
"van-button": "./dist/button/index",
"van-card": "./dist/card/index",
"van-cell": "./dist/cell/index",
"van-cell-group": "./dist/cell-group/index",
"van-checkbox": "./dist/checkbox/index",
"van-checkbox-group": "./dist/checkbox-group/index",
"van-col": "./dist/col/index",
"van-dialog": "./dist/dialog/index",
"van-field": "./dist/field/index",
"van-goods-action": "./dist/goods-action/index",
"van-goods-action-icon": "./dist/goods-action-icon/index",
"van-goods-action-button": "./dist/goods-action-button/index",
"van-icon": "./dist/icon/index",
"van-loading": "./dist/loading/index",
"van-nav-bar": "./dist/nav-bar/index",
"van-notice-bar": "./dist/notice-bar/index",
"van-notify": "./dist/notify/index",
"van-panel": "./dist/panel/index",
"van-popup": "./dist/popup/index",
"van-progress": "./dist/progress/index",
"van-radio": "./dist/radio/index",
"van-radio-group": "./dist/radio-group/index",
"van-row": "./dist/row/index",
"van-search": "./dist/search/index",
"van-slider": "./dist/slider/index",
"van-stepper": "./dist/stepper/index",
"van-steps": "./dist/steps/index",
"van-submit-bar": "./dist/submit-bar/index",
"van-swipe-cell": "./dist/swipe-cell/index",
"van-switch": "./dist/switch/index",
"van-switch-cell": "./dist/switch-cell/index",
"van-tab": "./dist/tab/index",
"van-tabs": "./dist/tabs/index",
"van-tabbar": "./dist/tabbar/index",
"van-tabbar-item": "./dist/tabbar-item/index",
"van-tag": "./dist/tag/index",
"van-toast": "./dist/toast/index",
"van-transition": "./dist/transition/index",
"van-tree-select": "./dist/tree-select/index",
"van-datetime-picker": "./dist/datetime-picker/index",
"van-rate": "./dist/rate/index",
"van-collapse": "./dist/collapse/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index"
}
完成后就可以在项目中使用有赞ui库了
方法二
通过npm安装使用
# npm
npm i vant-weapp -S --production
# yarn
yarn add vant-weapp --production
二.路由
1. 路由配置
在APP.json 文件中进行配置
"pages": [
"pages/home/home"
]
2. 路由跳转
一.普通页面跳转
1使用navigator标签跳转
跳转到新页面
2使用js事件进行跳转
wx.navigateTo({
url: '/pages/placeorder/placeorder?datastr='+datastr,
})
二.tabBar页面跳转：
1.在标签跳转时
添加属性open-type="switchTab"
跳转到新页面
2.js跳转
wx.navigateTo({
url: '/pages/index/index'
})
不管是标签跳转还是js跳转传参都直接在URL后拼接
1.标签跳转传参
跳转到新页面
2.js跳转传参
wx.navigateTo({
url: '/pages/placeorder/placeorder?datastr='+datastr,
})
传参后在目标页面将参数取出,(传过来的数据在生命周期函数的参数options中 )
(注意传参是如果要将对象之类的数据传过去需要将数据先转换成JSON数据，然后再在接收页面转换成原来的数据类型)
onLoad: function (options) {}
三.数据存储(将数据存储到Storage中)
存
wx.setStorageSync('token', res.user.token)
取
wx.getStorageSync('token')
四.自定义组件
1.文件的最外层创建文件夹，在里面新建Component文件
2.使用：在需要用到组件的页面文件中的josn文件中进行引入,接下来就可以在当前的页面文件中使用组件了
"usingComponents": {
"submit-bar":"../../compents/submit-bar/index"
}
//父传子(属性传值)
子接收
properties: {
totalMoney:String
},
2.子传父(事件传值)
在父组件自定义事件
1父组件wxml中的子组件标签上
2父组件的js
自定义事件上的形参就是用来接收子组件传递过来的值的
submit(e) {
//打印子组件传过来的值，
console.log(e.detail);
},
3子组件触发父组件上的自定义事件 ( {username:'我是子组件'}就是子组件要传给父组件的值)
this.triggerEvent('submit',{username: '我是子组件'});
五.生命周期新写了一篇文章链接在下面