小程序模板网

微信小程序开发-个人经验总结

2018-04-08 没咒念
本文作者:好JSER,来自原文地址

 

基础的配置及视图层、逻辑层自己看文档  [微信小程序文档][1]

这里只说一下自己的经验总结

提醒

微信小程序不运行在浏览器,所以不能操作Dom,也没有document、window对象

每一个页面路径最多五层

eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的)
注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮

没有外链,只能用app.json里配置的路由,a标签编译时会自动过滤掉

wx:for循环渲染时,要添加wx:key,否则报警告

使用<scroll-view>做x轴滚动时,要设置height属性,否则开发工具买账,手机可不惯着你

给视图绑定数据时,只有事件绑定、wx:key、wx:for-index、wx:for-item,直接绑定,不需要{{}},其它绑定都要在{{}}里绑定

app.json里的pages,最好是按照,层级顺序进行配置,要不然可能不会跳转

视图元素单位

设计时最好让ui做成750px,开发中,ui是多少px,你写成多少rpx就OK了,原理,自己查文档去

页面传参

<navigator url="/pages/detail/detail?id=2"></navigator>

Page({
    onLoad (opositions) {
        // 看看是不是你想要的
        console.log(opositions.id)
    }
})

视图响应

每个页面都有一个Page实例,响应就是该实例的setData方法触发的,
*直接给绑定数据赋值,数据会改变,但是视图不会渲染

js文件

    let config = {
        data: {}
    }
    Page(config)

事件绑定

wxml文件

    <view bindtap="tapHandler"></view>

js文件

    let config = {
        data: {},
        tapHandler () {
            console.log('i am a handler')
        }
    }

bindtap的绑定最终会解析成方法名,所以bindtap=“tapHandler(参数)”,是会报错的,—-没有找到‘tapHandler(参数)’这个方法,
好在,执行事件绑定函数时,会给它传递一个参数,参数里能取到,id、data-set,可以用他们俩绑定属性,不要企图找name、class等属性,没用的,没有

公用组件

组件分三个文件,wxml、js、css

wxml文件定义template模版,页面里以import方式引入,这样能控制传入模版的数据
js文件exports一个对象,页面里以require方式引入,并且合并到Page实例化的配置对象中

    let tempateConfig = require('url')
    let config = {
        data: {}
    }
    config = Object.assign(config, templateConfig)
    Page(config)
css文件以@import方式导入

开发技巧

1.锚点
<navigator>的url只能是app.json里配置的路由,只支持查询字符串,不支持hash,所以不能通过链接做锚点了。
还好微信提供了<scroll-view>,实现如下:

wxml文件

    <view>
        <button data-hash="hash1" bindtap="goHash">点击定向hash1</button>
        <button data-hash="hash2" bindtap="goHash">点击定向hash2</button>
    </view>
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}">
        <view id="hash1"></view>
        <view id="hash2"></view>
    </scroll-view>

js文件

    Page({
        data: {
            toView: 'hash1'
        },
        goHash (e) {
            let hash = e.currentTarget.dataset.hash
            this.setData({
                toView: hash
            })
        }
    })

但是这是单向的,只能点击按钮,跳转锚点,屏幕滑动到相应锚点,toView属性不会相应改变,当然,如果你能通过bindscroll事件动态取到的相关数据,并且最终能把toView计算出来,就另说了,但不要想操作dom获取元素宽高什么的,对不起,微信的dom卖完了,没有

2.滚动加载
微信没有document、window对象,所以没有onscroll给你用,那怎么办呢?
还好微信提供了<scroll-view>,实现如下:

wxml文件

    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>
        <view wx:for="{{movies}}" wx:key="index">
            {{item.name}}
        </view>
    </scroll-view>

js文件

    Page({
        data: {
            movies: []
        },
        getMovies () {
            let _self = this
            wx.request({
              url: 'https://......',
              data: {},
              success: function(res) {
                // res.data才是你后端返回的真实数据
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的数据,setData重置movies
        }
    })

可以做懒加载,也可以做预加载,具体逻辑自己想吧


暂时就这些啦。。。最后抱怨一句,咋就不支持外链呢,引共用组件咋那么麻烦呢



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23123.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询