微信小程序 实例开发总结


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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
js简单抽奖代码
Jan 16 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
代码解析React中setState同步和异步问题
Jun 03 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
vue路由懒加载的实现方法
2018/03/12 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python调用百度语音REST API
2018/08/30 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
pandas的resample重采样的使用
2020/04/24 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
python Tkinter模块使用方法详解
2022/04/07 Python