微信小程序开发实践体验

前言

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

image

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

需求梳理

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

小程序代码入口

20171121151127427623672.png

小程序代码基本介绍

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

20171121151127607494339.png

• index.wxml:类似于html里里的div结构

20171121151127449685630.png

• index.wxss:类似css

20171121151127968249225.png

组件

• html片段解析，具体使用方法参考>微信小程序中如何使用wxParse解析html

• 上拉加载更多，再对应页面的json文件中开启刷新加载

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等方法，具体使用参见官方文档链接

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

总结

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