小程序App()方法与getApp()方法

小程序App()方法与getApp()方法,第1张

App():注册一个小程序,小程序的入口方法

getApp():获取全局对象,然后进行全局变量和全局方法的使用

appjs

demojs(其他页面调用)

1、App() 必须在 appjs 中注册,且不能注册多个。

2、不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

网站导航

官方

先看一下官方对于 thisdata 和 thissetData({}) 的定义与用法

知识点

thisdata 是用来获取页面data对象,仅会改变数据,无法改变页面的状态,可能会造成数据不一致;

thissetData({}) 是用来修改数据,不仅会改变数据,而且还会改变视图;

问题

实际自己在学习过程中,遇到一个问题,下拉刷新的方法当中,用 thisdata thissetData({}) ,在数据显示上并没有什么不同,学习的视频中,授课老师用的是thisdata,这个地方我自己也没有搞清楚是为什么

*** 作效果:

thisdata

thissetData({})

可以看出来,两者使用并没有什么明显的区别。

总结

实际使用当中按照上面 知识点 部分加粗部分去执行,肯定是没有错的,涉及到页面数据更新的,使用thissetData({}) ,在js中使用data数据时使用thisdata属性 。

微信小程序得到>

最近有一个需求说是需要换颜色。

最后其实给我拒绝了,因为我说很难实现。但是心中还是上心了。

下面是替换颜色的方法。效果还行吧。一般般

主要代码还是copy别人的。这里就写一下,当记录

1、canvas的getImageData所生成的组成

根据循环可以得出

组成是ARGB格式,第一个是透明度,后续rgba

2、得出的循环需要按4的倍数进行循环,否则至少是卡死的地步

for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0]; if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1]; if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]; } 复制代码

3、注意替换颜色应该是倒序

所以0,1,2,3的顺序

替换的rgb颜色应该是3,2,1

得到数组rgb:data[i],data[i-1],data[2]

替换方式看上面代码

4、完整代码格式

<!DOCTYPE html> <html> <style> #btn { width: 100px; height: 50px; background: coral; position: fixed; top: 0; } </style> <head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImagesrc = "1719ebbc83be39f0webpjpg"; c = documentgetElementById("myCanvas"); if (cgetContext) { ctx = cgetContext("2d"); myImageonload = function() { ctxdrawImage(myImage, 0, 0); } } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctxgetImageData(0, 0, myImagewidth, myImageheight); var pdata = imageDdata; for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]; if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]; if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2]; } ctxputImageData(imageD, 0, 0); } function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129]); } </script> </head> <body onload="displayImage()"> <p>原始:</p> <img id="myPhoto" src="1719ebbc83be39f0webpjpg"> <p>Canvas:</p> <canvas id="myCanvas" width="200" height="200"></canvas> <button id="btn" onclick="colorChange()">变颜色啦!</button> </body> </html>

在小程序中,不允许直接d出用户授权的选择框,所以需要开发人员在界面上来设置提示信息,诱导用户点击,然后完成用户数据的录入和存取。在开发的过程中,某些请求是依托用户登录之后获取到的openId才能继续执行的,所以在页面上,某些数据渲染之前需要判断用户是否登陆,如若没有登录,怎样设计更好的交互来让用户登录。

使用小程序时,首先会进入到appjs这个文件中,这个文件里包含了俩个方法,一个是wxlogin(),另一个是wxgetSetting(),wxlogin()的目的是为了在用户登陆之后获取到一个对应的 code 值,然后通过这个值去自己的后台换取一个openId;wxgetSetting()第一是为了判断用户的授权范围,另一个是获取对应权限内的信息,比如说,用户授权小程序可以使用自己的基本信息,就可以在这个方法中获取到用户的头像、微信名、微信设置的城市这些字段,这就是一些需要掌握的基本流程,具体怎么实现登录呢?

在小程序中,官方给出了一种解决方案-button按钮:

在这个按钮中,有几个属性:

●  type :按钮的类型,可以设置为primary,背景色为绿色

●  wx:if :显示条件,内容分别为hasUserInfo和canIUse俩个字段,同时为真即可显示(俩个字段均需要在data中初始化赋值)

●  open-type :按钮的功能类型,getUserInfo是为了获取基本信息(也可以设置为其他→getPhoneNumber:获取用户手机号)

●  bindgetuserinfo :绑定的点击事件。在js中写对应的逻辑

在用户点击按钮之后,会出现一个d窗,确定用户是否授权 :

当用户点击允许之后,进入我们绑定的getUserInfo函数中:

在执行逻辑中,首先通过wxlogin()方法获取到用户对应的openId,方便后续的 *** 作,然后再通过wxgetUserInfo()来获取到用户的基本信息,发送请求,将基本信息入库存储,或者展示到页面上,就完成了登录流程。

1在登陆中可能会涉及到多个页面登陆成功之后的状态同步,可以通过 appgloableData 来实现,在全局对象中设置一个字段,然后不论在哪个页面实现了登录,都可以通过全局对象来完成更新。

2在 获取用户信息 的时候,有时候需要获取的是 中文类型 的数据,可以在 wxgetSetting() 的请求体中加一个 lang:'zh_CN'。 这样获取到的数据就是中文格式的了

微信小程序获取高度的方法有多种,以下是其中几种常用的方法:

1 使用wxgetImageInfo()方法获取信息,包括的宽、高等信息,代码如下:

wxgetImageInfo({

src: '路径',

success: function (res) {

consolelog(reswidth) // 宽度

consolelog(resheight) // 高度

}

})

2 使用Image对象获取高度,代码如下:

var img = new Image()

imgonload = function () {

consolelog(imgheight) // 高度

}

imgsrc = '路径'

3 使用小程序自带的组件,如image标签,通过bindload事件获取高度,代码如下:

<image src="路径" bindload="getImageHeight"></image>

getImageHeight: function (e) {

consolelog(edetailheight) // 高度

}

以上是微信小程序获取高度的几种方法,开发者可根据实际需求选择适合自己的方法。

以上就是关于小程序App()方法与getApp()方法全部的内容,包括:小程序App()方法与getApp()方法、小程序:this.data 与 this.setData({})、微信小程序(上)等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9753895.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存