小程序

这篇文章主要介绍了微信小程序 欢迎界面开发的实例详解的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图，需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的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” …

scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面，比如我的模块 主要属性： 使用演示： wxml <!--垂直滚动，这里必须设置高度--> <scroll-view>  <view></view>  <view></view>  <view></view>  <view></view></scroll-view><!-- white-space normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre: 保持HTML源代码的空格与换行,等同与pre标签 nowrap: 强制文本在一行,除非遇到br换行标签 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 inherit: 继承 --><!--水平滚动--><scroll-view><!-- display: inline-block-->  <view></view>  <view></view>…

这次给大家带来在小程序里实现animation，在小程序里实现animation动画的有哪些，下面就是实战案例，一起来看一下。 微信小程序实现animation动画，具体内容如下 1. 创建动画实例 wx.createAnimation() 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation。注意: export 方法每次调用后会清掉之前的动画操作 动画队列 调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。 通过绑定动画即可调用动画执行。 创建的动画实例可以通过调用动画方法进行描述，调用结束后会返回自身，支持链式调用的写法。在同一个动画实例内部，可以定义多种运动形式，并定义多个动画绑定到不同标签 示例代码： animation1: {} animation2: {} touch: function () { let animation1…

最近在用thinkphp框架写微信小程序的服务端，可能真的是处女座的缘故，从官方下载了一个php的微信解密demo，明明能整合成一个类也没多少代码的，非要分几个类来写，考虑到thinkphp 5.0的框架对于扩展的类引用路劲看着太蛋疼，所以就整合成了一个类，方便调用，有需要的朋友可以download。 百度盘下载地址：pan.baidu.com/s/1kURMQ2b <?php /** * 对微信小程序用户加密数据的解密示例代码. * * @copyright Copyright (c) 1998-2014 Tencent Inc. */ class WXBizDataCrypt { private $appid; private $sessionKey; private $blockSize = 16; private…

最近在做微信的应用号小程序开发，小程序的后台数据接口需要https安全请求，所以需要我的nodejs服务器能够提供https的支持，现在就将整个https服务器的搭建过程说一下。首先，我试了一下以前的过期的证书，在开发者工具里模拟的时候可以正常访问接口，在手机里测试时候微信小程序的wx.request是会报ssl握手失败的错误(request error :  request: fail ssl hand shake error)，所以只能重新申请一个证书，这里推荐使用阿里云的赛门铁克 ssl/tls 证书，是微信支持的，可以免费申请使用一年。赛门铁克ssl证书申请申请完之后审核周期一般在1~3天，就可以下载证书文件，我们选择其他类别的证书解压出来之后的目录如下图，我们需要用到的文件为第一二个文件，也就是我们的私有秘钥文件。然后需要搭建我们的https服务器，这里用到的是node 1. 简介：最近在做微信的应用号小程序开发，小程序的后台数据接口需要https安全请求，所以需要我的nodejs服务器能够提供https的支持，现在就将整个https服务器的搭建过程说一下。 首先，我试了一下以前的过期的证书，在开发者工具里模拟的时候可以正常访问接口，在手机里测试时候微信小程序的wx.request是会报SSL握手失败的错误(request error :  request: fail … 2. 简介：　　我的上一篇文章已经阐述了“32位程序和64位程序在64位平台上读写注册表的区别”，那么接下来将要回答上篇所留下来的一个问题：32位程序如何访问64位系统注册表（即：64位程序所访问的注册表位置）。 3. 简介：很多程序都有记录日志的需求，并且日志中包含的信息即有正常的程序访问日志，还可能有错误、警告等信息输出，python的logging模块提供了标准的日志接口，你可以通过它存储各种格式的日志，logging的日志可以分为 debug、info、warning、error、critical 5个级别，下面我们看一下怎么用 4. 简介：各位大神中午好，我在网上看到了这么一个知识点：函数内部声明的global变量可以被外部主程序访问 接着我运行了下面的代码，也验证了上面的结论：…

怎么从微信卡包跳转到小程序？下面本篇文章给大家介绍一下微信卡包跳转小程序实现及解决的方法，希望对大家有所帮助！ 微信卡包跳转小程序 先梳理小程序生命周期**小程序生命周期 onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow 生命周期函数--监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide onError 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 登录后复制 一些例子 App({   onLaunch: function (options) {     console.log("app.js ---onLaunch---" );   },   onShow:function(){     console.log("app.js ---onShow---");   },   onHide:function(){     console.log("app.js ---onHide---");   },   onError: function (msg){     console.log("app.js ---onError---" );   },   globalData: {     userInfo: null   } }) 登录后复制 打印结果如下…

部署微信小程序到线上环境的具体步骤： 一、微信小程序申请 申请，并认证（未认证不能发布，认证需要300元，目前只支持企业认证）详细见官网说明。 二、开发端准备 1、开发微信小程序，必须要有一个AppId，如果没有可以去注册一个。 申请后登陆 进入注册页面，点击上方立即注册。 2、点击选择“小程序”出现注册页面。 3、填写账号信息，包含邮箱，密码，验证码。 4、登录邮箱，点击链接，进行验证。 5、进入信息登记界面，进行信息登记，分为“主体信息登记”和“管理员信息登记”。“主体信息提交后不可修改”! 6、登录微信小程序。 7、设置，开发者设置，APPID,服务器域名。 8、设置，开发者工具，腾讯云。 9、安装开发者工具 下载与安装客户端微信开发者工具并使用小程序微信号扫码登录。选择左边的小程序项目，然后选择项目的目录，你的AppID和项目名称。   小程序项目管理 项目目录没有项目就用第10步的下载测试代码，进入后图： 10、下载测试代码 下载为你打包的 Demo 代码，作为开通环境所需,可以去腾讯云下载。 11、下载的是一个压缩包，里面包含服务端和客户端的代码文件。然后将整个文件夹导入到微信开发者工具中。 12、使用微信开发者工具创建小程序项目，选择第三步下载的代码文件夹，修改云数据库的一些配置信息。打开 server/config.js 或server/config.php文件。修改里面的 MySQL 数据库密码为您的小程序 AppID。 13、上传测试代码 使用微信开发者工具上传代码，完成开发环境的初始化，上传测试代码选择(部署后自动安装依赖)。 14、代码上传之后，进行代码部署操作。点击图中的“代码部署” 15、修改本地请求域名 点击微信开发者工具右上角【详情】-【腾讯云状态】即可查看【开发环境 request 域名】，复制域名，填写在 clien/config.js 文件的 host 处，并保存。 三、腾讯云准备…