小程序之个人总结

1.小程序数据同步

//实现数据同步，视图同步 this.setData({ 属性名：值 或 '对象.属性名':值 }) //实现数组中对应索引对象内属性值的同步 var str = `noticeListList[${index}].readStatus` this.setData({ [str]: "1" })

2.跳转到非tabBar页面

wx.navigateTo({ url: '/pages/customerDetails/customerDetails', })

3.图片

image:添加mode="widthFix" width给定死

4.获取参数

<view class="line {{item.readStatus=='0'? 'unread':''}}" bindtap="detailnoticeList" data-announceForm="{{item.announceForm}}"> 函数： detailnoticeList(even){ var announceForm = even.currentTarget.dataset.announceform console.log(announceForm) wx.navigateTo({ url: `/pages/noticeDetailImg/noticeDetailImg?announceForm=${announceForm}`, }) },

5.文字一行显示

overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:88%;

6.页面可进行分享或不允许分享

允许分享： 如果想不允许右上角转发分享当前页面，又想在页面里点击按钮分享并且自定义分享的 title 和 imgUrl 呢 可以在onLoad里写 this.onShareAppMessage = (e)=>{ return { title:'xxxxxxxxxxxx', path:'/pages/xxxx/xxxx', imgUrl:'xxxxxxxxxxxxxxxxxxx' } } 在页面wxml里写 <button open-type="share">分享button> 即可 不允许分享： onShareAppMessage 方法删除即可！

7.获取数组中对应id的对象或索引值

//获取索引值 var index = this.data.noticeListList.findIndex(item => item.announceId == even.currentTarget.dataset.announceid) //获取对应的对象 var index = this.data.noticeListList.find(item => item.announceId == even.currentTarget.dataset.announceid)

8.获取用户信息

/** * 获取用户信息 */ wx.getUserInfo({ success: function (res) { // console.log(res); _this.setData({ avatarUrl: res.userInfo.avatarUrl, nickName: res.userInfo.nickName, }) } })

9.修改上个页面数据

法1：使用page栈 A页面： changeData(value){ this.setData({ 'unread.announce':value }) }, //获取页面栈 var pages = getCurrentPages(); console.log(pages) if (pages.length > 1) { //上一个页面实例对象 var prePage = pages[pages.length - 2]; //关键在这里 prePage.changeData('1'放参数) }

10.提示语

wx.showToast({ title: '这里面可以写很多的文字，比其他的弹窗都要多！', icon: 'none', duration: 2000//持续的时间 })

11.为对象添加属性

Obj.assign(目标对象，源对象) //例一：原对象会变 var obj={a:1} var obj1={b:2} var obj3=Obj.assign(obj,obj1) console.log(obj)-------{a:1,b:2} //例二：原对象不改变 var var obj={a:1} var obj1={b:2} var obj3=obj.assign({},obj,obj1) console.log(obj)----{a；1}

12.合并快捷键

ctrl +shift +p 调出命令窗口，输入json lines则可以实现合并多行!

13.promise理解

// 1.Promise 本质是个构造函数，本身带有resolve,reject,all等方法，原型对象上有then，catch等方法 // 2.new Promise是一个对象，里边参数是一个函数，函数接收二个参数 (resolve,reject) // 3.new Promise 自动执行，因此需要将之放到函数里面，使其包裹，直接返回Promise对象 // 4.可进行链式调用,then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject函数的回调 // 5.在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中 // 6.Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调 function getNumber(){ return new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); } //reject getNumber() .then( function(data){ console.log('resolved'); console.log(data); }, //成功时的回调 function(reason, data){ console.log('rejected'); console.log(reason); }//失败时的回调 ); //catch getNumber() .then(function(data){ console.log('resolved'); console.log(data); }) .catch(function(reason){ console.log('rejected'); console.log(reason); }); //all 三个异步操作是并行执行的，等到它们都执行完后才会进到then里面 Promise .all([getNumber(), getNumber1(), getNumber2()]) .then(function(results){ console.log(results);//results是一个数组 });

14.小程序wxs脚本

// 1.内联 在wxml中 <wxs module="wxs_util"> //模块名 module.exports = { fractionFormat: function(fraction){ return fraction>=80 ? "优秀" : "一般" //逻辑 } } </wxs> 使用： {{wxs_util.fractionFormat(参数)}} // 2.外联 <wxs src="../tools.wxs" module="wxs_util"></wxs>

15.flex布局总结

//父元素样式设置 display；flex;//开启flex布局 flex-direction: row(默认) | row-reverse | column | column-reverse //控制主轴排列方向 flex-wrap: nowrap(默认) | wrap | wrap-reverse //控制主轴是否换行 flex-flow: row nowrap //是flex-deriction与flex-wrap属性的简写集合 justify-content: flex-start(默认) | flex-end | center | space-between | space-around | space-evenly //控制项目在横轴的排列方式 align-items:flex-start | flex-end | center | baseline | stretch(默认) //控制纵轴元素的排列方式 //项目样式设置 order:0 //越小越靠前 flex-grow:0 //决定剩余空间是否放大 flex-shrink:1 //默认空间不够时，等比例缩小 flex-basis:auto //设置项目的宽度 flex:0 1 auto //是flex-grow，flex-shrink与flex-basis三个属性的简写

16.component

// 1.在根目录创建components文件夹 // 2.在特定文件夹下创建component,会产生和page页面一样的四个文件 js文件： Component({ //一些组件选项 options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, //组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 properties: { // 活动封面 coverUrl: { type: String, value: "http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg" }, }, //组件的内部数据，和 properties 一同用于组件的模版渲染 data:{ isShowOrganizer:false, }, //组件的方法，包括事件响应函数和任意的自定义方法 methods: { // 跳转活动详情 activityDetailTap: function(e) { var currentPosition = e.currentTarget.dataset.currentPosition this.triggerEvent('signEvent', { 'currentPosition': currentPosition }) } } // 组件生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function(){}, moved: function(){}, detached: function(){}, }) // 3.component使用 在父组件的json页面： "usingComponents":{ "home-item":"../components/home-item/home-item" } 可在父组件的wxml文件里进行引入 <home-item></home-item>

17.template

// 1.在根目录下建立templates // 2.建立wxml,wxss文件 template.wxml: <template name="demo"> <view class='tempDemo'> <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text> <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text> </view> </template> // 3.页面引用： wxml引用： <import src="模板wxml路径" /> <template is="name名称" data="{{对象形式的数据}}"></template> wxss引用： @import "路径"

18.分包

// 1.结构上分开 ├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils // 2.在app.json中进行设置，添加subpackages属性 "subpackages": [ // 分包 { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB",//分包根目录 "name": "pack2", //分包别名 "pages": [ "pages/apple", "pages/banana" ] } ]

19.小程序值传递

// 1.父给子传值---修改父组件的值，子组件值也会相应进行修改； 修改子组件的值不会影响父组件的值----类似于props <my-prop money="{{money}}"></my-prop> 子组件内部进行接收： properties: { money: { // 属性名 type: Number, // 属性的数据类型 type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型) value: 0 // 默认值 }, money: Number // 简化的定义方式 } // 2.子给父传值--triggerEvent --- 类似于$emit 子组件抛事件： sendMoney () { // 触发一个自定义事件（事件需要在使用组件的标签上），并且发送一个数据 this.triggerEvent('myEvent',{ money:this.data.money }) } 父组件接收： <my-event bind:myEvent="getMoney"></my-event> 方法里： getMoney (e) { console.log(e.detail.money) this.setData({ parentMoney: e.detail.money }) } // 3.通过selectComponent获取子组件数据 this.selectComponent('#my_select 放class或id选择器').data.money

20.父子组件相互调用方法

// 父组件调用子组件中的方法 父组件中： 在onready函数中： this.子组件名称= this.selectComponent("#子组件id") 在需要调用的方法中： this.子组件名称.子组件方法() // 子组件调用父组件中的方法 子组件中： 事件触发，抛事件：this.triggerEvent("自定义事件名称",参数) 父组件中： <child bind:自定义事件名称="方法名"></child>