为了账号安全,请及时绑定邮箱和手机立即绑定

微信小程序开发实践体验

标签:
Html/CSS

前言

2017年微信公开课PRO版现场,张小龙宣布,微信小程序将于1月9日正式上线,并现场对小程序做了全面阐述,回答大家最关心的问题。

https://img1.sycdn.imooc.com//5d2fc1260001b23506590431.jpg

image

我大DC作为一个有“科技”含量的互联网公司,在这波热潮下怎么也得凑一波热闹!于是在我的“怂恿”下,我们前端部门开始了微信小程序的踩坑之路。

需求梳理

按照正常的软件开发流程来讲,应该是产品那边先提供原型和文档,然后我们的UI开始设计,但是当时我们产品组全力在搞消费端的APP人员短缺,作为一个喜欢折腾(其实是没有产品资源)的人来讲,最终选择自己来撸原型。最终的结果也只能说“嘿嘿嘿”了!只能说专业的人做专业的事,才能把事情做好。 保密原因,需求原型不能放出。

小程序代码入口

https://img1.sycdn.imooc.com//5d2fc1340001ff2010001027.jpg

20171121151127427623672.png

小程序代码基本介绍

  • index.js:业务处理代码,语法接触过vue的一定不陌生,es6简洁明了,上手也很快!

https://img1.sycdn.imooc.com//5d2fc13e0001b34f09441428.jpg

20171121151127607494339.png

  • index.wxml:类似于html里<body></body>里的div结构

https://img1.sycdn.imooc.com//5d2fc14800013f9210001001.jpg

20171121151127449685630.png

  • index.wxss:类似css

https://img1.sycdn.imooc.com//5d2fc150000169c209261380.jpg

20171121151127968249225.png

组件

https://img1.sycdn.imooc.com//5d2fc15b00010e7410000911.jpg

20171122151128009313627.png

onReachBottom: function() {    //上拉加载更多触发 
    console.log("上拉")
    wx.showToast({        title: '加载更多',        icon: 'loading',        duration: 1000
    })    this.fetchSearchList();//请求接口价值下一页数据
    console.log(this.data.pageNum)  
},fetchSearchList: function() {//加载一次,页数加1
    var that = this;
    that.setData({        pageNum: that.data.pageNum + 1
    });
    wx.request({        url: getData.apiList.news,        data: {            'newsReq': {                'pageNum': that.data.pageNum,                'pageSize': that.data.pageSize
            }
        },        method: 'POST', 
        success: function(res) {            console.log(res);            console.log(res.data.errorCode);            if (res.data.errorCode == '1'){
                wx.showToast({                    title: '没有更多了!',                    image: '../../images/icons/close.png',                    duration: 2000
                })
            }else{                if (!res.data.newsList.length == 0) {                    // success      
                    let list = res.data.newsList;
                    list.forEach(function (a) {
                      a.title = strDiscode(a.title);
                    });                    console.log(list);
                    that.data.newsList = that.data.newsList.concat(list);
                    that.setData({                      newsList: that.data.newsList
                    });
                } else {                    //没有数据了
                    wx.showToast({                      title: '没有更多了!',                      image: '../../images/icons/close.png',                      duration: 2000
                    })
                  }
                }
            },            fail: function(res) {                // fail
            },            complete: function(res) {                // complete
            }
        })
    }
  • layer弹窗组件,选择用小程序自带的wx.showToast等方法,具体使用参见官方文档链接

  • 地址组件、列表组件、数据请求组件,时间关系暂时没有单独撸出来

总结

因为小程序内有疑似食品销售内容,公司又没有相关证件,最终小程序虽然开发出来了,但是也胎死腹中。但是通过这个小尝试也体验了一波前后端分离,组件开发。



作者:愿爱无忧dk_
链接:https://www.jianshu.com/p/48339c123501


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消