Android 仿微信小程序入口动画
目录
- 效果对比
- 流程分析
- 自定义ViewGroup
- 小程序缩放比例值计算
- 动画遮罩
- MainActivity
效果对比
微信原版
仿照效果
流程分析
自定义ViewGroup
整个布局是通过自定义ViewGroup来管理的，在自定义ViewGroup中，子布局一共有两个，一个是小程序布局，一个是会话列表布局，然后按照上下分别摆放就可以了。
package com.example.kotlindemo.widget.weixin
import android.content.Context
import android.content.res.Resources
import android.util.AttributeSet
import android.util.Log
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import androidx.core.view.ViewCompat
import androidx.customview.widget.ViewDragHelper
import com.example.kotlindemo.R
import java.math.BigDecimal
class WeiXinMainPullViewGroup @JvmOverloads constructor(
context: Context?,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : ViewGroup(context, attrs, defStyleAttr) {
public var viewDragHelper: ViewDragHelper = ViewDragHelper.create(this, 0.5f, DragHandler());
var headerMaskView: WeiXinPullHeaderMaskView? = null
var isOpen: Boolean = false;
val NAVIGAATION_HEIGHT = 100
init {
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
for (index in 0 until childCount) {
if (getChildAt(index) != headerMaskView) {
getChildAt(index).layout(l, paddingTop, r, b)
}
}
}
override fun computeScroll() {
if (viewDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
Log.i("TAG", "onInterceptTouchEvent: ${ev.action}")
MotionEvent.ACTION_MOVE
return true
}
override fun onTouchEvent(event: MotionEvent): Boolean {
viewDragHelper.processTouchEvent(event)
return true
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
measureChildren(widthMeasureSpec, heightMeasureSpec)
}
fun createMaskView() {
if (headerMaskView == null) {
headerMaskView = WeiXinPullHeaderMaskView(context, null, 0)
addView(headerMaskView)
}
}
inner class DragHandler : ViewDragHelper.Callback() {
override fun tryCaptureView(child: View, pointerId: Int): Boolean {
return child is WeiXinMainLayout;
}
override fun onViewDragStateChanged(state: Int) {
super.onViewDragStateChanged(state)
}
/**
* 设置进度，设置遮罩layout
*/
override fun onViewPositionChanged(
changedView: View,
left: Int,
top: Int,
dx: Int,
dy: Int
) {
createMaskView();
var programView = getChildAt(0)
var divide = BigDecimal(top.toString()).divide(
BigDecimal(measuredHeight - NAVIGAATION_HEIGHT),
4,
BigDecimal.ROUND_HALF_UP
)
divide = divide.multiply(BigDecimal("100"))
divide = divide.multiply(BigDecimal("0.002"))
divide = divide.add(BigDecimal("0.8"))
if (!isOpen) {
programView.scaleX = divide.toFloat()
programView.scaleY = divide.toFloat()
} else {
programView.top = paddingTop + (-((measuredHeight - NAVIGAATION_HEIGHT) - top))
}
headerMaskView!!.maxHeight = measuredHeight / 3
headerMaskView!!.layout(0, paddingTop, measuredWidth, top)
headerMaskView!!.setProgress(
top.toFloat() / ((measuredHeight - (NAVIGAATION_HEIGHT + paddingTop)) / 3) * 100,
measuredHeight - (NAVIGAATION_HEIGHT + paddingTop)
)
if (top == paddingTop) {
isOpen = false
}
if (top == measuredHeight - NAVIGAATION_HEIGHT) {
isOpen = true
}
}
override fun onViewCaptured(capturedChild: View, activePointerId: Int) {
super.onViewCaptured(capturedChild, activePointerId)
var programView = getChildAt(0)
programView.top = paddingTop;
}
/**
* 释放
*/
override fun onViewReleased(releasedChild: View, xvel: Float, yvel: Float) {
/**
* 如果已经打开或者释放后小于屏幕三分之一，回到原位
*/
if (isOpen or (releasedChild.top + paddingTop <= measuredHeight / 3)) {
viewDragHelper.smoothSlideViewTo(releasedChild, 0, paddingTop);
ViewCompat.postInvalidateOnAnimation(this@WeiXinMainPullViewGroup);
return
}
viewDragHelper.smoothSlideViewTo(releasedChild, 0, measuredHeight - NAVIGAATION_HEIGHT);
ViewCompat.postInvalidateOnAnimation(this@WeiXinMainPullViewGroup);
}
override fun clampViewPositionVertical(child: View, top: Int, dy: Int): Int {
if (top <= paddingTop) {
return paddingTop
}
return (child.top + dy / 1.3).toInt();
}
}
}
还要增加一个用来填充状态栏的View，他的高度是动态获取的，整体布局是RelativeLayout，因为可以方便的设置中间View在状态下面和在导航栏上面。
class ViewUtils {
companion object{
@JvmStatic
fun getStatusBarHeight(resources: Resources): Int {
var result = 0
val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
if (resourceId > 0) {
result = resources.getDimensionPixelSize(resourceId)
}
return result
}
}
}
小程序缩放比例值计算
然后要做的就是拖动View，可以借助ViewDragHelper来完成，当拖动会话布局的时候，小程序的布局开始做一个缩放比例动画，这个缩放值我在这是这样做的，因为不可能是从0开始，要从一个基础值开始，这个基础值就是0.8，那么剩下0.2的缩放值，就是从开始下拉算起，到整体的高度的百分比。
比如屏幕高度是1000，下拉到500的时候，那么这个缩放值就是0.1，在加上基础值0.8，计算方式如下，整体高度还要减去导航栏的高度。
var divide = BigDecimal(top.toString()).divide(BigDecimal(measuredHeight-NAVIGAATION_HEIGHT), 4, BigDecimal.ROUND_HALF_UP)
divide = divide.multiply(BigDecimal("100"))
divide = divide.multiply(BigDecimal("0.002" ))
divide = divide.add(BigDecimal("0.8"))
if (!isOpen) {
programView.scaleX = divide.toFloat()
programView.scaleY = divide.toFloat()
} else {
programView.top = paddingTop + (-((measuredHeight - NAVIGAATION_HEIGHT) - top))
}
这里就注意细节了，下拉的时候，小程序布局是通过缩放呈现的，但是上滑关闭的时，小程序布局是和会话布局同时向上走的。
动画遮罩
这是比较麻烦的一步，就是绘制进度动画，也就是那三个圆点。
这个原点有三种状态，一是出现时从小到大，二是到一定大小后，分离出两个固定大小的圆，但是这两个圆比此时中间的要小，并且和下拉进度慢慢向两边扩撒，三是中间的圆开始缩小，直到和其余两个圈同等大小。
这里就要另一波细节了，当还在屏幕的三分之一下拉时，这个头部遮罩布局整体还是不透明的，但是到屏幕的三分之一时，这个布局的透明度开始从255到0运动。并且到达三分之一的时候，还要振动一下，并且只要振动过了，那么在手指未松开时，再次到达屏幕的三分之一时，不会产生振动。
还有一波细节，状态栏由于使用了View填充，所以，从屏幕三份之一后开始，这个View的透明度也要从255-0开始运动。
完整代码如下。
package com.example.kotlindemo.widget.weixin
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.os.VibrationEffect
import android.os.Vibrator
import android.util.AttributeSet
import android.util.Log
import android.view.View
import androidx.core.content.ContextCompat
import com.example.kotlindemo.MainActivity
import com.example.kotlindemo.R
class WeiXinPullHeaderMaskView @JvmOverloads constructor(
context: Context?,
attrs: AttributeSet?,
defStyleAttr: Int
) :
View(context, attrs, defStyleAttr) {
var isVibrator: Boolean = false;
var progress: Int = 0;
var maxHeight: Int = 0;
private val CIRCLE_MAX_SIZE = 32;
var parentHeight=0;
var paint = Paint()
private val DEFAULT_CIRCLE_SIZE=8f;
init {
setBackgroundColor(Color.argb(255 , 239, 239, 239))
paint.alpha=255;
paint.color = ContextCompat.getColor(context!!, R.color.circleColor)
paint.isAntiAlias = true;
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
var value = height.toFloat() / maxHeight
if (height <= maxHeight / 2) {
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), CIRCLE_MAX_SIZE * value, paint)
} else {
if (progress<100){
var diff = (value - 0.5f) * CIRCLE_MAX_SIZE
canvas.drawCircle(((width / 2).toFloat()-((0.4f-value)*100)), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
canvas.drawCircle(((width / 2).toFloat()+((0.4f-value)*100)), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
if ((CIRCLE_MAX_SIZE * 0.5f) - diff<=DEFAULT_CIRCLE_SIZE){
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
}else{
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), (CIRCLE_MAX_SIZE * 0.5f) - diff, paint)
}
}else{
paint.alpha=getAlphaValue();
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
canvas.drawCircle((width / 2).toFloat()-((0.4f)*100), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
canvas.drawCircle((width / 2).toFloat()+(((0.4f)*100)), (height / 2).toFloat(), DEFAULT_CIRCLE_SIZE, paint)
}
}
}
private fun getAlphaValue():Int{
val dc=parentHeight/3-ViewUtils.getStatusBarHeight(resources);
val alpha=((height).toFloat()-dc)/(parentHeight-(dc))
return 255-(255*alpha).toInt()
}
private fun vibrator() {
var vibrator = context.getSystemService(Context.VIBRATOR_SERVICE) as Vibrator
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
var createOneShot = VibrationEffect.createOneShot(7, 255)
vibrator.vibrate(createOneShot)
} else {
vibrator.vibrate(7)
}
}
fun setProgress(value: Float,parentHeight:Int) {
this.progress = value.toInt();
this.parentHeight=parentHeight;
if (value >= 100 && !isVibrator) {
vibrator()
isVibrator = true;
}
if (value < 100) {
isVibrator = false;
}
if (progress>=100){
setBackgroundColor(Color.argb(getAlphaValue() , 239, 239, 239))
var mainActivity = context as MainActivity
mainActivity.changeStatusBackgroundAlphaValue(getAlphaValue())
}else{
setBackgroundColor(Color.argb(255, 239, 239, 239))
}
invalidate()
}
}
还有就是这三个原点是始终位于遮罩View中间的，绘制的时候只需要在中间绘制，遮罩View的高度会被外界View所更改。
MainActivity
import android.graphics.Color
import android.os.Build
import android.os.Bundle
import android.view.View
import android.view.Window
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.example.kotlindemo.databinding.ActivityMainBinding
import com.example.kotlindemo.widget.weixin.ChatSession
import com.example.kotlindemo.widget.weixin.ChatSessionAdapter
import com.example.kotlindemo.widget.weixin.ViewUtils
class MainActivity : AppCompatActivity() {
lateinit var binding: ActivityMainBinding;
fun changeStatusBackgroundAlphaValue(value: Int){
binding.statusBar.setBackgroundColor(Color.argb(value, 239, 239, 239))
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main);
var layoutParams = binding.statusBar.layoutParams
layoutParams.height=ViewUtils.getStatusBarHeight(resources)
binding.statusBar.layoutParams=layoutParams
binding.wxMain.setPadding(0, ViewUtils.getStatusBarHeight(resources), 0, 0)
if (Build.VERSION.SDK_INT >= 21) {
val window: Window = window
window.getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
)
window.setStatusBarColor(Color.TRANSPARENT)
}
val chatSessions= mutableListOf<ChatSession>()
for (index in 0 .. 10){
chatSessions.add(ChatSession("https://img2.baidu.com/it/u=3538084390,1079314259&fm=26&fmt=auto&gp=0.jpg","马云","你来，我把公司给你","上午"))
chatSessions.add(ChatSession("https://img0.baidu.com/it/u=273576249,1042072491&fm=26&fmt=auto&gp=0.jpg","奥巴马","哥哥在哪呢","上午"))
chatSessions.add(ChatSession("https://img1.baidu.com/it/u=152902017,4157746361&fm=11&fmt=auto&gp=0.jpg","成龙","马上接你","上午"))
chatSessions.add(ChatSession("https://img0.baidu.com/it/u=3789809038,289359647&fm=26&fmt=auto&gp=0.jpg","窃瓦辛格","我教你啊","上午"))
}
binding.chatList.adapter=ChatSessionAdapter(chatSessions,this)
}
}
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<RelativeLayout
android:background="@drawable/program_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.example.kotlindemo.widget.weixin.WeiXinMainPullViewGroup
android:paddingTop="40dp"
android:layout_above="@+id/navigation"
android:id="@+id/wx_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.example.kotlindemo.widget.weixin.WeiXinProgram
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="17sp"
android:textColor="#C8C8C8"
android:gravity="center"
android:text="最近"
android:layout_width="match_parent"
android:layout_height="40dp"></TextView>
<androidx.cardview.widget.CardView
android:background="#424459"
app:cardBackgroundColor="#424459"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_width="match_parent"
android:layout_height="46dp">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="15sp"
android:textColor="#C8C8C8"
android:text="搜索小程序"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
</androidx.cardview.widget.CardView>
<com.example.kotlindemo.widget.weixin.ProgramGridLayout
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.example.kotlindemo.widget.weixin.ProgramGridLayout>
<com.example.kotlindemo.widget.weixin.ProgramGridLayout
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.example.kotlindemo.widget.weixin.ProgramGridLayout>
</com.example.kotlindemo.widget.weixin.WeiXinProgram>
<com.example.kotlindemo.widget.weixin.WeiXinMainLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@color/navigation_color">
<TextView
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_centerInParent="true"
android:gravity="center"
android:text="微信(323)"
android:layout_width="wrap_content"
android:layout_height="match_parent"></TextView>
<ImageView
android:layout_marginRight="45dp"
android:scaleType="center"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="@drawable/ic_search"
android:layout_width="28dp"
android:layout_height="28dp"></ImageView>
<ImageView
android:layout_marginRight="10dp"
android:scaleType="center"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="@drawable/ic_add"
android:layout_width="28dp"
android:layout_height="28dp">
</ImageView>
</RelativeLayout>
<com.example.kotlindemo.widget.weixin.WeiXinChatSessionListView
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:dividerHeight="10dp"
android:id="@+id/chat_list"
android:background="#FBFAFA"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.example.kotlindemo.widget.weixin.WeiXinChatSessionListView>
</com.example.kotlindemo.widget.weixin.WeiXinMainLayout>
</com.example.kotlindemo.widget.weixin.WeiXinMainPullViewGroup>
<LinearLayout
android:background="@color/navigation_color"
android:orientation="vertical"
android:id="@+id/navigation"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="60dp">
</LinearLayout>
<View
android:background="@color/navigation_color"
android:id="@+id/status_bar"
android:layout_width="match_parent"
android:layout_height="100dp"></View>
</RelativeLayout>
</layout>
以上就是Android 仿微信小程序入口动画的详细内容，更多关于Android 微信小程序入口动画的资料请关注我们其它相关文章！
相关推荐
-
Android Studio实现仿微信APP门户界面详解及源码
目录 前言 界面分析 界面动态实现代码 静态界面实现 总结 前言 你好! 本文章主要介绍如何用Android Studio制作简易的门户界面,主要说明框架的各部分功能与实现过程,结尾处附有源码. 界面分析 注:按钮图标是从阿里矢量图标库获取,保存在drawable文件中调用. 首先根据我们的大致规划布局,我们可以先建立三个核心XML文件: top.xml: <?xml version="1.0" encoding="utf-8"?> <Linear
-
Android仿QQ微信未读消息小红点BadgeHelper
Android 小红点 未读消息功能 BadgeHelper 因为最近的项目需求,翻遍github上的未读消息红点开源库, 发现大部分 不能适配不同情况的布局, 所以我写了一个能兼容全部的 ! 网上的写法是 继承TextView然后生成一个小红点drawable,设置到背景中去, 然后把目标view外层加一层FrameLayout,然后把小红点添加进去 但这样做的问题来了, 小红点与目标View 会叠起来!, 挡住文字,!!! 看得我瞎了~~~ 而且 他们提供的setOffsetX setpad
-
Android仿微信通话背景的高斯模糊效果
先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高斯模糊,并把它作为整个页面的背景色. 关于Android如何快速实现高斯模糊(毛玻璃效果),网上一堆相关介绍, 下面直接给出网上模糊化工具类(已验证可行): import android.graphics.Bitmap; /** * 快速模糊化工具 */ public class FastBlur { public static Bitmap doBlur(Bitmap sentBitmap, int radius,
-
Android ListView仿微信聊天界面
Android ListView仿聊天界面效果图的具体代码,供大家参考,具体内容如下 1.首先页面总布局(ListView + LinearLayout(TextView+Button)) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="
-
AndroidStudio实现微信界面设计
目录 一.内容 二.技术 三.xml代码 四.Java代码 五.界面展示 一.内容 实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换 二.技术 使用布局(layouts)和分段(fragment),对控件进行点击监听 三.xml代码 top.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche
-
Android实现微信登录的示例代码
目录 一.布局界面 二.MainActivity.java 微信登录的实现与qq登录类似.不过微信登录比较麻烦,需要拿到开发者资质认证,花300块钱,然后应用的话还得有官网之类的,就是比较繁琐的前期准备工作,如果在公司里,这些应该都不是事,会有相关人提前准备好.在这里我们已经拿到了开发者认证,并且申请到了微信登录的授权. 现在直接介绍mob来实现微信登录的代码,并获取微信的相关数据,比较简单. 一.布局界面 布局界面只需要一个button来触发授权就可以 <Button android:id=&qu
-
Android 仿微信小程序入口动画
目录 效果对比 流程分析 自定义ViewGroup 小程序缩放比例值计算 动画遮罩 MainActivity 效果对比 微信原版 仿照效果 流程分析 自定义ViewGroup 整个布局是通过自定义ViewGroup来管理的,在自定义ViewGroup中,子布局一共有两个,一个是小程序布局,一个是会话列表布局,然后按照上下分别摆放就可以了. package com.example.kotlindemo.widget.weixin import android.content.Context imp
-
Android中微信小程序开发之弹出菜单
先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度
-
Android仿微信清理内存图表动画（解决surfaceView屏幕闪烁问题）demo实例详解
最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生了闪烁,而采用了双缓冲机制,即A.B两个缓冲轮流显示在画布上,同时,使用不当,同样容易产生闪烁,这是由于A.B中有一个缓冲没有改变. 在我写这个view的时候就遇到了这个问题,研究了好久终于解决. 首先说一下思路: 微信清理缓存的动画是: 一个圆环不停的转动,同时中间有文字显示-->加载完成后,出现
-
Android分享微信小程序技巧之图片优化
前言 小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳.于是小菜整理了一个简单的小方法处理一下图片! 微信规定,分享小程序展示的图片应该在 128KB 以内,同时图片默认展示比例为 5:4,这样小菜默认的图很多是竖直的图,只会展示一部分. 遮挡部分图片 规定 小菜尝试了图片的[等比压缩][非等比压缩]和[不压缩],效果依旧不合适,图片所占位置默认以横向方向填充满分享出的布局
-
Android中微信小程序支付倒计时功能
看效果 由于web 经验弱爆- - 一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格
-
vue插件--仿微信小程序showModel实现模态提示窗功能
效果图: 下面是源码: index.js import Vue from 'vue'; import model from './model.vue'; export default { install(Vue) { const defaults = { show: false, mask: true, title: '提示', content: '这是正文', confirmButton: true, cancelButton: true, confirmText: '确认', cancelT
-
Android开发微信小程序页面的图文教程
初识Android Android是我们在日常生活中注视最久的,我们所使用的所有手机APP基本上都可以在Android上运行.而这次我们将开发一个app页面. Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试.大概就是一个开发工具. 项目介绍 我们会首先建立大概的框架,会将一个页面分为三个部分.下
-
Android开发微信小程序路由跳转方式
目录 官方文档 路由跳转的两种形式 标签形式 js形式 快速总结 小程序路由跳转 1.1 wx.switchTab(Object object) 1.2 wx.reLaunch(Object object) 1.3 wx.redirectTo(Object object) 1.4 wx.navigateTo(Object object) 1.5 wx.redirectTo与wx.navigateTo的区别 1.6 wx.navigateBack(Object object) 官方文档 https
-
微信小程序的动画效果详解
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ
-
微信小程序入口场景的问题集合与相关解决方法
前言 最近一段时间都在做小程序. 虽然是第二次开发小程序,但是上次做小程序已经是一年前的事了,所以最终还是被坑得死去活来. 这次是从零开始开发一个小程序,其实除了一些莫名其妙的兼容性问题,大多数坑点都是在微信小程序的各个入口场景处. 所以这里整理一下微信小程序的各个入口场景,以及从这些入口场景进入小程序会面临的问题以及解决方案. 这里只列出常用的几种场景: [简单场景]启动小程序并进入 [简单场景]退出重进(启动小程序后,退出小程序,再次进入小程序) [简单场景]退出重进首页(启动小程序后,退出