美文网首页让前端飞
小程序实践问题记录

小程序实践问题记录

作者: rain_li | 来源:发表于2018-07-22 18:50 被阅读1次

    1.开始添加项目,报错如下VM838:2 未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。

    原因的项目目录不对,只识别app,文件夹下不能有二级目录,什么配置以及docs都是自己加的 ,小程序不识别

    2.地图开发

    2-0.map等组件是由客户端创建的原生组件,层级最高,不能通过z-index控制层级覆盖

    ------cover-view、cover-image 只有这两个可以在地图层级之上。
    
    ------1.9.0之下,上述两个标签只能嵌套在 map 等原生组件里面,以后的版本可以嵌套在view组件之上
    
    -----cover-view嵌套在map组件中时,宽高超过map的宽高的时候,会被剪切。
    

    2-1.地图满屏: 设置width: 100%; height:100% 不管用

    这时候用,整个屏幕默认满屏为100vh;所以将地图的高度设置为100vh宽度设置为100% 即width: 100%; height:100vh即可

    2-2.覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image

    2-3.我也不知道经纬度中心设置之后,markers开始不显示,

    到最后就好了,不知道是缓存还是因为我设置的marker标记点离中心点太远,我没看见--------待解

    2-4.其他看文档就很详细

    3.点击事件

    • 事件是视图层到逻辑层的通信方式

    • 事件可以将用户的行为反馈到逻辑层进行处理

    • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

    • 事件对象可以携带额外信息,如 id, dataset, touches。

    • 3-1. 使用 bind
      开头的事件绑定,这种绑定不会阻止冒泡事件向上冒泡---bindtap

    • 3-2. 使用 catch 开头的事件绑定,这种绑定可以阻止冒泡事件向上冒泡—catchtap

    • 3-3. tapName函数事件提供了足够多的信息,也就是event对象

    event对象中的target是事件产生的源头组件,而currentTarget则是当前捕获这个事件的组件

    • 3-4.子组件的事件传给父组件
    this.triggerEvent('PayDetail') // PayDetail为自定义名字
    

    在父组件接收使用

    在wxll中:
    bind:PayDetail='PayDetail'
    
    在js中:
    PayDetail () {
        console.log(PayDetail具体方法内容)
    }
    

    4.map下marker的气泡动态传入值?

    不在data里,在发布里利用ES6字符串模板动态添加

    5.组件形式和vue如出一辙

    需要注意<text></text>,合并写分开写的不同,分开写默认空行会解析,并不是传统的行级标签

    如下

    <text>lixiaodian</text>
    

    展示为

    lixiaodian
    

    如下

    <text>li
    xiaodian</text>
    
    li
    xiaodian
    

    6.微信的滑块视图容器swiper组件

    一个swiper会嵌套swiper-item,横向有几个就套几个swiper-item,

    but

    当纵向是列表时,ios8,9,10会出现swiper-item里的所有内容是150px;并出现滚动条, 下方留白,目前微信并没有修复这个问题

    暂时解决,不用swiper,自己用view写,缺点是少了过度动画,但是加上wx.loading会好很多

    7.判断条件

    wx:if ==> v-if // 保条件块在切换时销毁或重新渲染
    wx:elif
    wx:else
     
     
    hidden='{{haveOrders}}'  ==> v-show // 组件始终会被渲染,只是简单的控制显示与隐藏。 判断如果haveOrders是不展示,用于多种状态是很好选择
    

    8、<block/>

    并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    9.{{}}写法

    wx:if这种需要有{{}}, 事件不需要,定义的文本需要

    10.列表切换可以在请求前加wx.showLoading提升体验

    11.组件中使用slot插槽

    插槽的样式需要定义在组件调用的页面;并且在开发工具上看可能样式没有生效,在真机上看看。开发工具上显示的节点树有问题,如果真机上还不对,那可能是真的出问题了。

    12.小程序接入高德地图

    在真机上预览时,需要打开调试(放开url校验),否则地图不能正常显示

    13.地图上的markers

    不管事markers,还是别的挂在data上的,赋值一定要找中间变量,否则就会覆盖掉原有的值

    未完待续······

    更多文章: https://xiaodian-li.github.io/

    相关文章

      网友评论

        本文标题:小程序实践问题记录

        本文链接:https://www.haomeiwen.com/subject/yqkrmftx.html