创新路
我们一直在努力

饭粒淘优惠券小程序

27日晚间小程序宣布对个人开发者开放,第一时间注册了已饭粒淘相关的一个小程序,准备试玩一下。由于受各种限制,目前饭粒淘主要的功能还是只有查询优惠券,很多有关注服务的同学提了一些很不错的建议,这个即将是我新的月份的一些计划,开始做这些计划,并且全力做好,只要有1个用户也要想办法做好自己的服务体验。

最大的用户肯定还是自己,一开始只是自己在使用,但是并没意识制作一个属于自己的工具。

小程序初衷

在经历了这几个月以来,小程序也在不断探索这块区域,开放了不少自己的能力,希望找到一个平衡点让大家都能接受。
小程序肯定是要小,但是“麻雀虽小,五脏俱全”,并不能因为程序小就说这不能做,那不能做,更多的还是入口的问题而已。
由于目前饭粒淘的主要功能就是查询,于是我的工具目前就只有两个页面。
– 表单查询页面
– 结果详情页面

学习过程

在这之前小程序开放的过程中,已经有很多很好的相关教程的积累了。而我还是选择官方文档入手,quickstart项目开始学习。文档分为几个部分,作为开发的我更多的是关注开发的一部分,随意也大致扫描了一下设计,这个也只能说是扫一眼,知道了微信他们对自己的产品的一些设计的理念。

  • 介绍

  • 设计

  • 开发

  • 简易教程

  • 框架

  • 组件

  • API

  • 工具

  • Q&A

  • 运营

  • 框架
    框架部分主要是介绍了目录结构,打开qs项目
    – 组件目录(多个)
    – app.js (主逻辑,应该也可以成为全局逻辑)
    – app.json (公共配置参数)
    – app.wxss (公共样式表程序)

    组件中都包含一个.js文件,.json的配置文件,.wxml视图文件,.wxss样式文件。app.js以及其它.js 逻辑层主要书写关于页面的逻辑,.wxml视图层主要书写以前的‘html’结构,.wxss样式主要书写以前的‘css’样式。

    组件都按照一定的要求进行了定义,简单理解是,对于容器,块元素就是 view,行元素就是 text,实际比这个还要负责一点,因为还有一些其它封装的组件,只是使用的时候不是很熟悉还是需要参考文档来使用。

    制作过程

    因为之前学过vue,写小程序的过程中难免会把它俩放一起思考,比如我现在做好了我的表单页面,一个 textarea ,一个 button 。
    在 textarea 中输入购物链接或者是APP中复制出来的链接,对于手机上的APP应用,后者的使用应该是更为突出的,所以后续会针对性的处理一下对于这种方式的内容分析,目前主要的匹配关键字是“手机淘宝”。
    在 textarea 中输入的链接如何获取呢?这一点好像和vue的处理是类似的,因为v-model也是基于 input 事件,这里是通过bindInput事件,通过事件方法去设置参数,假设参数名为msg。

        data: {
            'msg': msg
        },
        // vue中不需要特殊其它的处理了,小程序中如果要更新msg,还需要这样
        setMsg(e) {
            this.setData({
                'msg': e.data
            })
        }

    点击 button 后发起数据请求,这里会用到发起请求API: wx.request ,有点需要注意的就是发起的是 https 请求,小程序后台配置的安全域名必须是 https 协议的域名,由于一些硬件与成本的限制我的暂时不能接入数据,这一点是无奈的。(题外话:对于之前网站被插入垃圾弹窗广告,https协议应该可以解决这个问题)昨晚一咬牙续费了3年ECS,这个问题马上也会迎仍而解了。
    本地模拟了数据,异步请求成功会调用 success 方法,如果查询的数据有优惠详情,跳转至详情页组件中,如果没有优惠之前弹出或者输出查询结果信息。这里肯定以有数据为例,我要如何把数据传递到下一个组件中呢?

    • URL传参(跳转的时候直接把参数作为 str 放置在url中传递)

    • 本地数据缓存(放入 storage 中,url中只是传递存入数据的key)

    拿到数据后进行一个进行一个数据显示,这个小程序目前阶段就玩活了,其实还有很多的优化细节,以及一些后续功能的迭代,敬请期待。

    总结

    只是初略的使用了一些简单的组件以及API来入手小程序,后续还会随着功能的迭代来深入了解一些其它的元素,虽然微信已经处理好了底层的封装,我们只需要利用接口来制作符合我们需求的应用就好了,但是难免还是有各种坑,复制剪贴板就还是有坑,开发者工具升级可以自动获取剪贴板内容,微信模拟实测的时候这个功能是失效的,对于用户的微信版本肯定也是有差异的,这一点后续还需要多多考虑。

    学以用,再深思。

    未经允许不得转载:天府数据港官方信息博客 » 饭粒淘优惠券小程序

    客官点个赞呗! (0)
    分享到:

    评论 抢沙发

    评论前必须登录!

    天府云博 - 做有态度的开发&运维&设计学习分享平台!

    联系我们百度云主机