奥门威尼斯网址微信小程序 教程之小程序配置_JavaScript_脚本之家

前言

微信小程序手势操作之单触摸点与多触摸点,小程序手势

前言

手势对于一些效果是比较重要的,在canvas、交互等中应用非常广,看一下微信小程序手势是如何的。

Demo

为了研究小程序是否支持多手指,需要使用touchstart,touchmove,touchend

// index.wxml
<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" >
</view>

//index.js
touchstartFn: function(event){
  console.log(event);
 },
 touchmoveFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 },
 touchendFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 }

单触摸点,多触摸点

官方文档:changedTouches

changedTouches 数据格式同 touches。
表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

"changedTouches":[{ 
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]

真机效果

实现以上Demo后模拟器是无法看到多触摸点的数据的,所以你需要真机来测试。

看下真机的log信息

奥门威尼斯网址 1

在changedTouches中按顺序保存触摸点的数据,所以小程序本身支持多触摸点的手势

结论

设想:
既然小程序的手势是支持多触摸,而且可以获取到相关的路径,那么相关路径计算也是可行的。

场景: 多触摸交互效果,手指绘制等

触摸点数据保存

为了能够来分析触摸点的路径,最起码是简单的手势,如左滑、右滑、上滑、下滑,我们需要保存起路径的所有数据。

触摸事件

触摸触发事件分为”touchstart”, “touchmove”,
“touchend”,”touchcancel”四个

详见:

存储数据

var _wxChanges = [];
var _wxGestureDone = false;
const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];
// 收集路径
function g(e){
  if(e.type === "touchstart"){
    _wxChanges = [];
    _wxGestureDone = false;
  }
  if(!_wxGestureDone){
    _wxChanges.push(e);
    if(e.type === "touchend"){
      _wxGestureDone = true; 
    }else if(e.type === "touchcancel"){
      _wxChanges = [];
      _wxGestureDone = true; 
    }
  }
}

结尾

这篇文章,主要探索一下,希望你也可以提前看一下手势的解析。

前言
手势对于一些效果是比较重要的,在canvas、交互等中应用非常广,看一下微…

微信小程序 数组等操作

微信小程序——配置

微信小程序 教程之模块化

手势对于一些效果是比较重要的,在canvas、交互等中应用非常广,看一下微信小程序手势是如何的。

最近在做一个小程序的demo。由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为例,给新手分享一些经验。

以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助。

微信小程序 教程之注册页面

Demo

首先这是原始数据,json的数组。

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多
tab 等。

微信小程序 教程之注册程序

为了研究小程序是否支持多手指,需要使用touchstart,touchmove,touchend

我们尝试对改数据进行操作,同时渲染到页面。

以下是一个包含了所有配置选项的简单配置app.json :

App()

// index.wxml

//index.jstouchstartFn: function{ console.log; }, touchmoveFn: function{ console.log; // console.log("move: PageX:"+ event.changedTouches[0].pageX); }, touchendFn: function{ console.log; // console.log("move: PageX:"+ event.changedTouches[0].pageX); }

1,数据的添加

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true}

App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。

官方文档:changedTouches

在获取到表单的数据后,自己组装一个对象,然后通过push()的方法添加一条数据,注意push的数据的index是+1的,也就是说原本数组中index依次为0,1,2,新增加的就是3,依次类推。

app.json 配置项列表

object参数说明:

changedTouches 数据格式同 touches。
表示有变化的触摸点,如从无变有,位置变化,从有变无。

如果想在前面插入数据,就要用到数组合并的操作了,concat()方法可以选择合并到前面或者后面例如newarray.concat;。

属性

属性

"changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14}]

2,数据的删除

类型

类型

真机效果

小程序里面貌似没有remove的方法,所以删除我选择的是split方法,这也是遇到的一个坑。notes.splice就可以从index为id的位置开始,删除i个元素,这点大家都懂,看代码就明白,不再赘述

必填

描述

实现以上Demo后模拟器是无法看到多触摸点的数据的,所以你需要真机来测试。

3,数据的修改

描述

触发时机

在changedTouches中按顺序保存触摸点的数据,所以小程序本身支持多触摸点的手势

notes = obj可以把数组中index为i的元素设置为obj。

pages Array 是 设置页面路径 window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部 tab 的表现 networkTimeout Object 否
设置网络超时时间 debug Boolean 否 设置是否开启 debug 模式

onLaunch Function 生命周期函数–监听小程序初始化
当小程序初始化完成时,会触发onLaunch onShow Function
生命周期函数–监听小程序显示
当小程序启动,或从后台进入前台显示,会触发onShow onHide Function
生命周期函数–监听小程序隐藏 当小程序从前台进入后台,会触发onHide 其他
Any 开发者可以添加任意的函数或数据到Object参数中,用this可以访问

结论

最后,如果要在修改数据的同时渲染到页面,一定要记得使用setData方法。

pages

前台、后台定义:
当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有正在的销毁,而是进入了后台;当再次启动微信或再次打开小程序,又会从后台进入前台。

设想:
既然小程序的手势是支持多触摸,而且可以获取到相关的路径,那么相关路径计算也是可行的。

 this.setData 

接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对
pages 数组进行修改。

只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

场景: 多触摸交互效果,手指绘制等

顺便附上js里面array操作的方法列表。大家可以自己试试。

文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: 'I am global data'})

触摸点数据保存

pages/pages/index/index.wxmlpages/index/index.jspages/index/index.wxsspages/logs/logs.wxmlpages/logs/logs.jsapp.jsapp.jsonapp.wxss

App.prototype.getCurrentPage()

为了能够来分析触摸点的路径,最起码是简单的手势,如左滑、右滑、上滑、下滑,我们需要保存起路径的所有数据。

则,我们需要在 app.json 中写

getCurrentPage()函数用户获取当前页面的实例。

触摸触发事件分为”touchstart”, “touchmove”, “touchend”,”touchcancel”四个

{ "pages":[ "pages/index/index" "pages/logs/logs" ]}

getApp()

详见:

window

我们提供了全局的getApp()函数,可以获取到小程序实例。

存储数据

用于设置小程序的状态栏、导航条、标题、窗口背景色。

// other.jsvar appInstance = getApp()console.log(appInstance.globalData) // I am global data
var _wxChanges = [];var _wxGestureDone = false;const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];// 收集路径function g{ if(e.type === "touchstart"){ _wxChanges = []; _wxGestureDone = false; } if{ _wxChanges.push; if(e.type === "touchend"){ _wxGestureDone = true; }else if(e.type === "touchcancel"){ _wxChanges = []; _wxGestureDone = true; } }}

属性

App()必须在app.js中注册,且不能注册多个。不要在定义于App,使用this就可以拿到app实例。不要在onLaunch的时候调用getCurrentPage(),此时page还没有生成。通过getApp获取实例之后,不要私自调用生命周期函数。

结尾

类型

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

这篇文章,主要探索一下,希望你也可以提前看一下手势的解析。

默认值

描述

navigationBarBackgroundColor HexColor #000000
导航栏背景颜色,如”#000000″ navigationBarTextStyle String white
导航栏标题颜色,仅支持 black/white navigationBarTitleText String
导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持
dark/light

注:HexColor,如”#ff00ff”

如 app.json :

{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }} 

tabBar

如果我们的小程序是一个多 tab 应用,那么我们可以通过 tabBar 配置项指定
tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性

类型

必填

默认值

描述

color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab
上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上边框的颜色, 仅支持 black/white list
Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性

类型

必填

说明

pagePath String 是 页面路径,必须在 pages 中先定义 text String 是 tab
上按钮文字 iconPath String 是 图片路径,icon 大小限制为40kb
selectedIconPath String 是 选中时的图片路径,icon 大小限制为40kb

networkTimeout

可以设置各种网络请求的超时时间。

属性

类型

必填

说明

request Number 否 wx.request的超时时间,单位毫秒 connectSocket Number 否
wx.connectSocket的超时时间,单位毫秒 uploadFile Number 否
wx.uploadFile的超时时间,单位毫秒 downloadFile Number 否
wx.downloadFile的超时时间,单位毫秒

debug

可以在开发者工具中开启 debug
模式,在开发者工具的控制台面板,调试信息以 info
的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发

可以帮助开发者快速定位一些常见的问题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window
配置项的内容,页面中配置项会覆盖 app.json 的 window
中相同的配置项。页面的.json只能设置 window
相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,如:

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论

电子邮件地址不会被公开。 必填项已用*标注