登录  /  注册

关于小程序

hzc
发布: 2020-07-04 09:42:57
转载
2797人浏览过

笔记向文章。欢迎和各位一起讨论。如果文章中有错误请指出。

1.一些需要去取data中的变量的操作。我们可以运用es6对象解构赋值来做简化。这样的方法我们不光可以在小程序中使用同样也可以用到vue里面。

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序
登录后复制

2.小程序的 组件公共属性 hidden如果不注意看文档的朋友可能就会遗漏这个公共属性。等于css 中的display:none; 可以运用于频繁切换的节点。

<view></view>
 <!--  false 为显示   true为隐藏 -->
登录后复制

引用官方的话来说:”一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。“

3.关于text博主刚开始写小程序的时候在wxml中使用格式化文档时踩过的坑

<!-- 这样的写法会出现换行的效果 -->
<text>
    SevenDream 
    SevenDream 
</text><!-- 如果不需要换行的效果--><text>SevenDream SevenDream</text>
登录后复制
4.关于image 有事需要渲染图片时,连续的图片会发现图中间有条白缝。如果做商城方面在商品详情中它是切片的话中间有白条很不雅观。在image标签加入display:bolck就好了。
<image></image>
登录后复制

5c642fc3f151384489289cc150faf5e.png

5.关于跳转
  • 如果超出最大页面栈处理方法(大于10页) ,将跳转封装。

//utils.js
export function navigateTo(url) {
   let Type = getCurrentPages().length &gt;= 10 ? 'redirectTo' : 'navigateTo'
    return new Promise((resolve, reject) =&gt; {
      wx[Type]({
        url,
        success: res =&gt; {
          resolve()
        },
        fail: err =&gt; {
          reject(err)
        },
      })
    })
}
// 其他页面js
import {navigateTo} from '../../utils/utils';
navigateTo('pages/index/index')
登录后复制
  • 返回上一页时刷新(例如返回个人中心)

wx.switchTab({
    url: '/pages/my/my',
    success:function(){
        var page  =  getCurrentPages().pop(); //当前页面
        page.onLoad(); // 调用 onload
    }})
登录后复制
  • 在返回上一页时设置上一页的的值

    var pages = getCurrentPages(); // 获取页面栈
    var prevPage = pages[pages.length - 2];  //上一页
    prevPage.setData(data);
    wx.navigateBack({
      delta: 1
    })
登录后复制

6.this.setData  如果想改变对象或数组中的一个

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改变对象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改变数组
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }
登录后复制
  • 如果我们有个表单需要绑定很多bindinput,运用上面的方案,在加上data-*。不需要写很多方法了一个就够了

  <input>
  <input>
  <input>
登录后复制
// 写入
  data:{
    FromOBJ:{
      name:'',
      phone:'',
      address:''
    }
  },
  onInput: function (e) {
      let name =  e.currentTarget.dataset.name
      let value = e.detail.value
      let valueObj = `FromOBJ.${name}`;
      this.setData({
        [valueObj]:value
      })
  }
登录后复制

7.封装 wx.request (网上有很多关于wx.requset的封装方案,这里展示楼主的封装方案)

//API.js
const HTTP_URL = 'https://xxxx.xxx.xxx/'

function Request(url, data={},method='get',ContentType='application/json;charset=utf-8') {
    return new Promise((resolve, reject) =&gt; {
        wx.request({
            url: HTTP_URL.http + url,
            method: method,
            header: {
                'Content-Type': ContentType,
                'xxxx': 'xxxx'  // 其他header头
            },
            data: data,
            success: function (res) {
                resolve(res.data)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}

export function getApi(data) {
    var url = '/getapi';
    return Request(url, data)
}
// 其他页面js
import {getApi} from '../../utils/api';
getApi({a:1,b:2}).then(res=&gt;console.log(res)).catch(err=&gt;console.log(err))
登录后复制

8.其他注意的问题

  • 如果运用到了iconfont,是一次性将文件全部放入的话0一定要把iconfont.js删除。真机的时候会出现报错。白屏无法加载的情况。

  • 制作动画效果时注意 建议用官方的Animation Api 或者css3的animation  慎用transition

  • 最后说一个楼主遇到的坑(可能是我的处理方式不对)。在map 组件上的层级不要使用高度变化或者宽度变换的动画过度效果,微信Animation Api和css3 transition  Animation 属性都会卡桢,卡成ppt。尽量使用他们(微信api,css3)的"transform"来解决问题。

推荐教程:《微信小程序

以上就是关于小程序的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号