微信小程序 实例开发总结


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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php中文本操作的类
2007/03/17 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
几个Shell Script面试题
2012/08/31 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
考试不及格检讨书
2014/01/09 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
操行评语大全
2014/04/30 职场文书
暑期培训心得体会
2014/09/02 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Golang bufio详细讲解
2022/04/21 Golang
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android