Android小程序开发中遇到的问题有哪些

本篇内容介绍了"Android小程序开发中遇到的问题有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

渲染列表时用 block 包裹

   {{index}}:    {{item}} 

block 不会真实渲染到页面上，只作为一个包裹元素，接受控制属性

写一个自定义组件

自定义组件分为 4 部分

• properties 组件接收的属性

properties: {  // 输入框的默认提示  placeholder: {        type: String,  // 属性值的类型        value: ''      // 属性默认值  }},

• data 组件数据

• methods 组件方法，一般内部方法用_开头

• 组件的生命周期函数，一般使用 ready，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）

调用父组件传入的方法

// 子组件var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据var myEventOption = {} // 触发事件的选项this.triggerEvent('onclear', myEventDetail, myEventOption)

// 父组件onSearch(e){  console.log(e.detail.value)}

父组件直接调用子组件的方法

// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法let searchBar = this.selectComponent('#search-bar');searchBar.setData({ value: e.currentTarget.dataset.name })searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});

子组件中获取 dom 宽高

// 获取屏幕宽度let windowWidth = wx.getSystemInfoSync().windowWidth// 在组件内部需要写 thislet query = wx.createSelectorQuery().in(this);let that = this;query.selectAll('.tagItem').boundingClientRect()query.exec(function (res) {        let allWidth = 0;        res[0].map(item=>{                allWidth = allWidth + item.width                return allWidth        })        let length = res[0].length        let ratioWidth = allWidth / windowWidth        that.setData({                allLength: length,                iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533)        })})

页面返回时不会调用 onLoad

之前把调用接口的部分写到了onLoad里，从文章列表进入详情页，在从详情页点击左上角回退返回列表页，列表页的阅读数应该更新，但是没有更新，因为没有重新调文章列表接口。

所以把调文章列表接口的部分写好了onShow里。

自定义 tabbar 优化

第一次优化，将组件封装的tabbar改成页面的模版形式

1、之前用组件的形式写的，改为了 template；tabbar 上的图标都改成的 iconfont，解决点击 tabbar 时候会闪的问题

2、点击 tabbar 时，需要销毁之前的页面，在跳到需要跳转的页面，所以在 navigator 组件用了 reLaunch

第二次优化，将带有tabbar的页面都封装成组件写在页面，在页面中setData切换tab

修改的地方：

• 带有tabbar的页面都重写为组件形式

• 因为组件中只有挂载完成后的 ready 方法，所以之前页面中 onShow，onReachBottom，onPullDownRefresh 都放到父页面调用

onPullDownRefresh: function () {        if (this.data.tabbarID === this.data.tabbarList.article) {          // 使用 selectComponent 找到组件实例，调用内部方法          let articlePage = this.selectComponent('#article-page');          articlePage.onPullDownRefresh();        } else if (this.data.tabbarID === this.data.tabbarList.doctor){          let doctorPage = this.selectComponent('#doctor-page');          doctorPage.onPullDownRefresh();        } else {          wx.stopPullDownRefresh();        }},

带来的问题：

• 每个tabbar都会有下拉刷新的效果，即使不需要下拉刷新

• 从其他页面点击按钮，直接跳到首页的某一个tab卡，可能会有问题

使用 iconfont

• 登录 iconfont.cn 下载 zip 包

• 解压缩，其中的 .ttf 文件在 transfonter.org/ 上面转成 base64 格式

• 将 style.css 写入新建的 iconfont.wxss 中，上面的字体文件路径用刚刚转好的 base64 替代

• 在 app.wxss 中 import iconfont.wxss

注意：组件中的样式本身不受 app.wxss 影响，因此，组件中需要使用 iconfont 的时候，需要手动引一下 app.wxss 或者 iconfont.wxss

列表的左滑效果

1、在列表的父元素上绑定事件

        滑动的内容                滑动后显示的按钮

.list-container{        position: relative;        width:100%;        height: 224rpx;        overflow: hidden;}.list-item{        position: absolute;        left: 0;        z-index: 5;        transition: left 0.2s ease-in-out;        background-color: #fff;}.backCover{        box-sizing: border-box;        width: 200rpx;        height: 218rpx;        position: absolute;        right: 0;        top: 0;        z-index: 4;}

2、通过判断滑动距离修改列表项的 left 值

onTouchStartListItem: function (e) {        // 是单指触碰        if (e.touches.length === 1) {                // 记下触碰点距屏幕边缘的x轴位置                this.setData({                        startX: e.touches[0].clientX,                })        }},onTouchMoveListItem: function (e) {        var that = this        if (e.touches.length == 1) {                var disX = that.data.startX - e.touches[0].clientX;                var deleteBtnWidth = that.data.deleteBtnWidth;                var txtStyle = "";                if (disX < deleteBtnWidth / 4) {                        txtStyle = "left:0rpx";                } else {                        txtStyle = "left:-" + deleteBtnWidth + "rpx";                }                var index = e.currentTarget.id                var list = that.data.doctorList.list                list[index].txtStyle = txtStyle;                that.setData({                        doctorList: {                                list: list,                                total: that.data.doctorList.total                        }                })        }},  onTouchEndListItem: function (e) {        var that = this        if (e.changedTouches.length == 1) {                var endX = e.changedTouches[0].clientX;                var disX = that.data.startX - endX;                var deleteBtnWidth = that.data.deleteBtnWidth;                var txtStyle = disX > deleteBtnWidth / 2 ? "left:-" + deleteBtnWidth + "px" : "left:0px";                var index = e.currentTarget.id                var list = that.data.doctorList.list                list[index].txtStyle = txtStyle;                that.setData({                        doctorList: {                                list: list,                                total: that.data.doctorList.total                        }                });        }},

"Android小程序开发中遇到的问题有哪些"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！