微信小程序 实例开发总结


Posted in Javascript onApril 26, 2017

微信小程序 开发过程中遇到问题总结

第一次正式开发一个小程序,就从以下几个方面来谈一谈小程序的开发过程和心得吧,主要说说这次项目中用到的功能。

数据请求

这次的小程序,没有太多的附加功能,所以数据以及对数据的处理是这次的主体工作,小程序向用户提供API,供用户向自己的服务器请求数据,值得一提的是,开发小程序之前,需要先在微信公众平台申请appID,并且绑定域名,域名必须是https协议,然后在小程序的开发工具的配置信息中完善信息,请求的地址需要在前面绑定的域名下。这个项目中用到wx.request从服务器拉取数据。

wx.request({
   url: that.data.couponData.requestUrl,
   data: that.data.couponData.queryData,
   header: {
     'content-type': 'application/json'
   },
   success: function(res) {
     var list = res.data.goodsList;
     console.log(res.data);
     for(var i in list) {
       list[i].quanUsedNum = parseInt(list[i].quanTotalNum) - parseInt(list[i].quanRemainNum);
      list[i].isImgRendered = false;
     }
    list[0].isImgRendered = list[1].isImgRendered = list[2].isImgRendered = list[3].isImgRendered = true;
     that.setData({"couponData.totalPage":res.data.totalPage});
     that.setData({"couponData.list":that.data.couponData.list.concat(list)});
    that.setData({"couponData.loadmore":!that.data.couponData.loadmore});
     that.setData({"couponData.queryData.pageNum":parseInt(that.data.couponData.queryData.pageNum) + 1});
     if(that.data.couponData.queryData.pageNum > that.data.couponData.totalPage) {
      that.setData({"couponData.isAction":false});
    }

    if(that.data.couponData.list.length < 1) {
      that.setData({"couponData.nodata":true});
    }
     if(f) {
       f();
     }
   }
 });

数据缓存

这里使用数据缓存是因为需要做一个搜索功能,就涉及到页面之间的数据传递,放在地址中也是一种方法,借用一下localStorage也可以,使用wx.setStorage将数据存储到localStorage中,页面跳转之后,在从localStorage中读取就可以了,读取数据的时候分同步读取和异步读取。

剪切板的应用

借用小程序的API可以很方便的将任何信息复制到剪切板,然后就可以粘贴了。

wx.setClipboardData({
   data: '【' + that.data.couponData.list[e.currentTarget.id].goodsTitle + '】复制这条信息,打开【手机淘宝】' + that.data.couponData.list[e.currentTarget.id].twoInOneKouling,
   success: function(res) {
     that.setData({"couponData.copyTip":true,"couponData.Kouling":that.data.couponData.list[e.currentTarget.id].twoInOneKouling})
   }
 });

模板

在这个项目中,页面基本很相似,但有细微差别,所以就使用了模板,新建一个template/template.wxml,name属性必须要设置。

<template name='navsearch'>
 <view class='nav-search'>
   <view class='nav-search__container space-between'>
     <view class='nav-search__search' wx:if='{{isSearch}}'></view>
     <input class='nav-search__input' placeholder='请输入关键词找券' name='queryStr' value="{{queryStr}}" bindfocus='toggleSearch' bindconfirm='doQuery' bindinput="syncQuery"/>
     <view class='nav-search__delete' wx:if='{{!isSearch}}' bindtap='deleteAll'></view>
     <view class='nav-search__btn center' wx:if='{{!isSearch}}' bindtap='doQuery'>搜索</view>
   </view>

   <view class='nav-filter' bindtap='toggleFilter'></view>
 </view>
 </template>

 <!--在其他文件中使用模板-->
 <import src="/template/template.wxml" />
 <template is='navsearch' data="{{...couponData}}"></template>

模块化

对于公共的js可以写在一个专门的js文件中,然后使用module.exports暴露接口。
通用的js文件使用require引入。

var common = require('../../common/common.js');
 ...
 common.f(); //调用

redirectTo & navigateTo

redirectTo是重定向至某页面,navigateTo是打开新的页面,值得说明的一点是,使用navigateTo打开的页面太多会导致小程序卡顿。

分享

Page({
   onShareAppMessage: function () {
     return {
       title: 'your title!',
       path: '/xxxx/xxxx/xxxx',  //分享之后回到这个页面
       success: function(res) {
         f(); //成功回调;
       },
       fail: function(res) {
         f(); //失败回调;

       }
     }
   }
 })

提高列表滑动的流畅性

简而言之就是页面滚动到哪里,列表中的图片就显示到哪里,实现方法如下。

//js文件
 Page({
   loadImg:function(e) {
     //计算接下来加载哪几张
     var index = Math.floor((e.detail.scrollTop - 8)/259.5);
     var temp = this.data.couponData.list; //完整的列表
     var min = Math.max(index * 2,0),max = Math.min(index * 2 + 8,temp.length);
     for(var i = min; i < max; i ++) {
       if(temp[i] && !temp[i].isImgRendered) {
         temp[i].isImgRendered = true; //列表中的每一项有一个标记是否加载图片的的属性,默认false,随着页面滚动,一个个变成true。
       }
     }
     this.setData({"couponData.list":temp});
     temp = null;
   },
 })

 //wxml文件中在scroll-view上绑定事件。
 <scroll-view class="section" scroll-y="true" bindscroll='loadImg'></scroll-view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
AngularJS 霸道的过滤器小结
Apr 26 #Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 #Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 #Javascript
xmlplus组件设计系列之列表(4)
Apr 26 #Javascript
JS实现数组按升序及降序排列的方法
Apr 26 #Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 #Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
多重?l件?合查?(二)
2006/10/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
git进行版本控制心得详谈
2017/12/10 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python远程linux执行命令实现
2020/11/11 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
开朗女孩的自我评价
2014/02/10 职场文书
夜不归宿检讨书
2014/02/25 职场文书
总账会计岗位职责
2014/03/13 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技