fwq

这篇文章主要介绍了微信小程序 欢迎界面开发的实例详解的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图，需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面，下面将演示如何通过微信小程序实现一个欢迎界面。 下面将会按照以下的顺序介绍： 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局使用swiper滑动视图实现，滑动视图的每一个item通过一个block块包裹，块中包裹的是滑动视图的每一个item， item中包含image图片和button按钮   <swiper>     <block>      <swiper-item>       <image></image>       <button>立即体验</button>      </swiper-item>     </block>   </swiper> 登录后复制 2.逻辑的实现 在data中准备了一个imgs，数组中存放了3个图片的地址，这里还有一个start，该函数用来监听界面上button的点击。 wx.navigateTo这个api的作用就是实现界面的跳转并有返回的按钮，url是用来指定跳转的界面     Page({     data:{       imgs:[         "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",…

这篇文章主要介绍了微信小程序 wx.request(接口调用方式)详解及实例的相关资料，wx.request请求方式比较简单,但是在使用的时候出现错,这里就记录下，需要的朋友可以参考下 微信小程序 wx.request—-接口调用方式     最近开发了一个微信小程序版的任务管理系统，在向Java后台发送接口时遇到了一些问题，在这里做一个简单的总结。 官方接口 官方给出的接口叫做wx.request，请求方式比较简单，下面是官网给出的请求实例。 wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址  data: {    x: '' ,    y: ''  },  header: {    'content-type': 'application/json'  },  success: function(res) {   console.log(res.data)  } }) 登录后复制 存在的问题 wx.request请求的header中content-type默认为application/json，如果我们想换种方式比如用”application/x-www-form-urlencoded”会发现在请求头信息中并没有取代默认的application/json而是新增了这种方式，另外在用jquery.ajax请求时即便同样使用application/json方式来请求，得到的数据格式也不相同，无论用什么请求方式ajax都会将请求数据转换为&name1=value1&name2=value2的形式，这样在根据content-type来解析请求数据时就会出现问题，不知道微信是有意这样做还是它根本就是个bug。总之是给我带来了不必要的麻烦。 微信小程序发送的是https请求，在本地调试时可以用http，如果放在手机上测试时校验请求方式和域名，不合法会报以下错误： 为了方便请求，可以对wx.request做一个简单的封装，这样我们再调用的时候就方便了许多，代码如下： var app = getApp(); function request(url,postData,doSuccess,doFail,doComplete){    var host = getApp().conf.host;…

怎么在小程序里传东西？ 使用微信小程序的官方接口（上传下载） 微信小程序普通的信息交互是非常简单的，通过wx.request接口就可以了。需要注意的一点是，如果是POST请求，必须设置header参数的内容类型content-type为application/x-www-form-urlencoded，否则服务端无法接收小程序POST过来的数据。 代码示例：  wx.request({ url: 'https://api.tianapi.com/meinv/?key={APIKEY}', method: 'POST', data:'num=10', //参数为键值对字符串 header: { //设置参数内容类型为x-www-form-urlencoded 'content-type':'application/x-www-form-urlencoded', 'Accept': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ items: res.data }) } }) 登录后复制 但是，仅仅是简单的文本数据交互可能还不够，如果你的小程序需要下载服务端的文件以及小程序用户上传本地文件到服务端该怎么办？这里就需要用到小程序另外两个接口wx.downloadFile和 wx.uploadFile，在微信小程序中所有官方提供的API接口都是以wx开头的。 一、下载文件接口wx.downloadFile（object） 下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。 OBJECT参数说明：…

本系列为作者从入门开始进行详解，适合初入门者按照系列逐步观看学习； 1：页面的生命周期 在初始页面：index.js中增加如图1所示代码 图1 点击“编译”后，运行这个小程序：日志如图2所示：初始页面index.js启动会从app,js中的生命周期方法调用开始：onLaunch—onShow，然后开始调用index.js页面中的生命周期方法：onLoad—onShow—onReady，当点击“后台”时，页面index.js进入后台，这时回调生命周期方法onHide，如图3所示，如果再点击“前台”，使页面回到前台，这时回调页面生命周期方法：onShow（注意，这时不再回调onLoad） 如图4所示 图2 图3 图4 2：页面的跳转 编写index.wxml代码如图5所示，可以看出text组件绑定了一个事件：itemClick，itemClick方法实现详见图1： itemClick: function (){      console.log("---index page itemClick---");     wx.navigateTo({       url: '../logs/logs'     }) 登录后复制 其中：wx.navigateTo代表从index.js这一页面跳转到pages/logs/logs页面，注意：navigateTo代表跳转到logs页面后，index页面并不销毁，在logs页面下面，通过logs页面左上角的返回按钮可以返回到index页面，而如果是wx.redirectTo，则index页面销毁，无法从logs页面返回到index页面，这里就仅以wx.navigateTo为例 图5 在模拟器中如果点击文章2的text组件后，跳转到对应logs界面日志如图6所示，logs页面对应js代码如图7所示，通过对比图6，图7可以看出，当从index页面跳转到logs页面这个过程中，要先调用index生命周期方法onHide(如果是wx.redirectTo方式跳转还要调用index生命周期方法onUnload)，然后依次调用logs页面的生命周期方法：onLoad—onShow—onReady 图6 图7 3：页面间参数传递 将图1，index.js代码修改为： wx.navigateTo({      url: “../logs/logs?id=1&title=标题abc” …