fwq

一、http模块分装 首先我们为什么要去分装微信的http模块呢，我们先看一下微信自带的http请求它的一个写法 wx.request({   url: 'test.php', //仅为示例，并非真实的接口地址   data: {     x: '',     y: ''   },   header: {    'content-type': 'application/json' // 默认值   },   success (res) {     console.log(res.data)   } }) 登录后复制 这种请求方式呢类似我们古老的jquery方式的分装，我们需要在success的回调函数里面做一些业务操作，这种方式会形成我们的回调地狱问题，同时代码也不够直观，以及代码过于繁琐； 接下来我会通过promise的这种方式对于代码进行分装，将请求方式做一些简化 一、项目目录构建 在utils目录下边创建request.js文件，去做http请求封装，我们是通过promise这种方式进行封装，这样有利于我们对于错误的处理，也可以很直观的查看业务逻辑，封装示例代码如下： /**  *   * @param {String} url   * @param {Object} data   * @param {String} method   * @param {String} header   */ function request(url, data={}, method='GET', header="Content-Type: application/json",) {     return new Promise(function (resolve, reject) {…

这篇文章主要介绍了微信小程序 picker-view 组件详解及简单实例的相关资料,需要的朋友可以参考下 实现效果图： 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number Array   数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 indicator-style String   设置选择器中间选中框的样式 bindchange EventHandle…

这篇文章主要介绍了微信小程序 石头剪刀布实例代码的相关资料,需要的朋友可以参考下 微信小程序 石头剪刀布 昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。 .js: var numAi = 0 var timer Page({  data:{  //控制按钮是否可点击  btnState:false,  //记录获胜次数  winNum:0,  //中间的话“Ho~ You Win”  gameOfPlay:'',  //用户选择的图片  imageUserScr:'/pages/image/wenhao.png',  //电脑随机的图片  imageAiScr:'',  //石头剪刀布图片数组  srcs:[  '/pages/image/shitou.png',  '/pages/image/jiandao.png',  '/pages/image/bu.png'  ]  },  …

编辑小程序页面内容的方法：首先在编辑处右击pages选择新建目录创建个文件夹；然后再右击该文件夹选择新建component，并输入文件名字；最后打开【app.json】文件，并操作导航栏的编辑即可。 编辑小程序页面内容的方法： 1.首先呢，你要考虑好自己的首页是几个大页面，在此呢，以我的小小的Demo做样板参照吧，我的首页是三大块，所以呢我要再创建两个页面，包含项目成功之后就有index界面，共三个界面 （PS（操作过程）：右击pages选择新建目录创建个文件夹，然后呢再右击该文件夹选择新建Component，输入文件名字即可，当然这里的新建Component里面有四个文件—js、json、wxml、wxss，除了这种直接创建呢你也可以一个一个手动创建文件不过在js文件里的有const app = getApp();和page({}),否则会提示报错或者调用不了app.js中的一些方法。） 2.到此呢，就要编辑首页了，我这里的首页呢是有底部导航栏的的，所以往下看吧： 打开app.json文件（PS：建议像我这样的小白呢还是看一下官方的小程序代码构成介绍比较好）： https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-配置 登录后复制 打开之后就开始操作导航栏的编辑了，看代码： （注意：用的时候记得把下面的注释全都删了，在app.json中不能有注释，否则会报错，我的注释只是为了大家方便理解而已，报错原因还挺让你出乎意料，我也是试了几次才发现。） {   "pages": [     "pages/index/index",     "pages/logs/logs",     "pages/asset/asset",     "pages/personal/personal"   ],   "window": {     "backgroundTextStyle": "light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "WeChat",     "navigationBarTextStyle": "black",　　　　"navigationStyle": "custom"　　　　　　// 自定义头部导航时添加   },   "sitemapLocation": "sitemap.json",   "tabBar": {　　//这里的tabBar就是导航栏的编辑了…

微信小程序的 api 实现需要兼顾方方面面，所以仍然使用 callback 写法。 众所周知，Callback-Hell（回调地狱）是传统 JS 语法上的历史问题。但毕竟称手的工具是开发效率的源泉，因此笔者对当前版本的微信小程序 API 做了简单的封装——weapp。 同时，微信小程序本身专注于交互和 UI 的实现，并未提供内置的管理。如果众多的异步操作都直接在 App 或 Page 中一一实现，相信开发起来会很困难，而且不易于测试。 因此，我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块，用以方便的在小程序中实现应用状态管理 redux-weapp。 特别地，微信小程序构建（编译）时不支持从 App scope 之外 require 文件，npm 在此就不好用了。 所以，我们需要实时 build 依赖到应用本地，在微信小程序中引用本地的 modules。…

在以往的APP或网页产品中，用户使用时可以浏览多个页面，这些产品的服务器可以承载足够多的数据。而小程序的特点就是规模小，为了不让用户在使用小程序时造成困扰，微信小程序规定页面路径只能是五层，请尽量避免多层级的交互方式。  页面跳转的话就涉及到了多个页面层级 第一种：wx.navigateTo(OBJECT)  保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 OBJECT参数说明： url String 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’  success Function 接口调用成功的回调函数  fail Function 接口调用失败的回调函数  complete Function 接口调用结束的回调函数（调用成功、失败都会执行） onLoad:function(options) { wx.navigateTo({ url:'../index/index' })} 登录后复制 第二种：wx.redirectTo(OBJECT)  关闭当前页面，跳转到应用内的某个页面。 OBJECT参数说明： url String  需要跳转的应用内页面的路径 …

这篇文章主要介绍了微信小程序 swiper组件详解及实例代码的相关资料,需要的朋友可以参考下 微信小程序 swiper组件 常用属性： 效果图：  swiper.wxml添加代码： <swiper>  <block>   <swiper-item>    <image></image>   </swiper-item>  </block></swiper><button> 是否显示面板指示点 </button> <button> 是否自动切换 </button> <slider></slider> 自动切换时间间隔 <slider></slider> 滑动动画时长 登录后复制 js: Page({  data: {   imgUrls: [    'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',    'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',    'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   ],   indicatorDots: false,   autoplay: false,   interval: 1000,…