微信小程序动态设置央视

一、wx.setNavigationBarTitle

1.设置整个小程序通用标题，在app.json里设置：

"window": {

"navigationBarTitleText": "默认标题"

}

复制

2.单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：

{

"navigationBarTitleText": "首页"

}

复制

3.动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上

wx.request({

url: "请求接口url",

method: "POST",

data: {},

success: function (res) {

if (res.data.code == 200) {

// 修改navigationBarTitleText

wx.setNavigationBarTitle({

title: goods_name

})

}

}

})

复制

tips：动态设置 >页面独汪枯掘立设置 >通用设置

效果图：

当然，另外我们可以通过点击事件来动态设置标题：

test: function () {

wx.setNavigationBarTitle({

title: "我是点击后的标题"

})

}

复制

效果图：

二、wx.setNavigationBarColor

设置页面导航条颜色

wx.setNavigationBarColor({

frontColor: '#ffffff',

backgroundColor: '#ff0000',

animation: {

duration: 400,

timingFunc: 'easeIn'

}

})

复制

frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor：背景颜色值，有效值为十六进制颜色

animation：动画效果

①animation的结构包括：duration，timingFunc；

②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）

效果图：

三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading

wx.showNavigationBarLoading：在当前页面显示导航条加载动画

wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

index.wxml

<button bindtap="showLoading">显示加载动画</败胡button>

<button bindtap="hideLoading">隐藏加载动画</button>

复制

index.js

// 显示加载动画

showLoading: function () {

wx.showNavigationBarLoading()

},

// 隐藏加载动画

hideLoading: function () {

wx.hideNavigationBarLoading()

}

复制

效果图：

四、wx.hideHomeButton

隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮困核，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

        小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种改孝察方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”{{动画名称}}”。具体步骤：

1）创建动画对象并设置有效参数==>wx:createAnimation({参核茄数：有效值})

2）创建一组动画，调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意慎瞎命名)，用该对象开启动画==>this.setData({vip_animal: animation.export()})

4）在页面上调用动画对象==>animation="{{vip_animal}}"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="{{style_img}}"来显示

微信小程序开发中toast也是重要的消息提示方式.

提示框：

wx.showToast(OBJECT)

显示消息提示框

OBJECT参数说明：

示例代码：

?

12345

wx.showToast({ title:'成功', icon:'success', duration: 2000})

wx.hideToast()

隐藏消息提示框

?

123456789

wx.showToast({ title:'加载中', icon:'迟拍旦loading', duration: 10000}) setTimeout(function(){ wx.hideToast()},2000)

wx.showModal(OBJECT)

显示模态d窗

OBJECT参数说明：

示例代码：

?

123456789

wx.showModal({ title:'提示', content:'这是一个模态d窗', success:function(res) { if(res.confirm) { console.log('用户点击确定') } }})

wx.showActionSheet(OBJECT)

显示 *** 作菜单

OBJECT参数说明：

success返回参数说明：

示例代码：

?

12345678

wx.showActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!res.cancel) { console.log(res.tapIndex) } }})

设置导航条

<view>提示：{{tip}}</view>

<button type="default" bindtap="showModal">点击我d出modal对话框</button>

<view>

<modal title="modal对话框贺灶"码扰 hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"

bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>

</view>

Page({

data:{

// text:"这是一个页面"

tip:'',

buttonDisabled:false,

modalHidden:true,

show:false

},

showModal:function(){

this.setData({

modalHidden:!this.data.modalHidden

})

},

modalBindaconfirm:function(){

this.setData({

modalHidden:!this.data.modalHidden,

show:!this.data.show,

tip:'您点击了【确认】按钮！',

buttonDisabled:!this.data.buttonDisabled

})

},

modalBindcancel:function(){

this.setData({

modalHidden:!this.data.modalHidden,

tip:'您点击了【取消】按钮！'

})

}

})

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

OBJECT参数说明：

示例代码：

?

123

wx.setNavigationBarTitle({ title:'当前页面'})

wx.showNavigationBarLoading()

在当前页面显示导航条加载动画。

wx.hideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转：

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

?

123

wx.navigateTo({ url:'test?id=1'})

?

123456

//test.jsPage({ onLoad:function(option){ console.log(option.query) }})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

?

123

wx.redirectTo({ url:'test?id=1'})

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明：

动画：

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画 *** 作

OBJECT参数说明：

?

123456

var animation = wx.createAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画 *** 作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。

示例：

?

1

<viewanimation="{{animationData}}"style="background:redheight:100rpxwidth:100rpx"></view>

?

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

Page({ data: { animationData: {} }, onShow:function(){ varanimation = wx.createAnimation({ duration: 1000,timingFunction:'ease', }) this.animation = animation animation.scale(2,2).rotate(45).step() this.setData({ animationData:animation.export() }) setTimeout(function() { animation.translate(30).step() this.setData({animationData:animation.export() }) }.bind(this), 1000) }, rotateAndScale:function () { // 旋转同时放大 this.animation.rotate(45).scale(2, 2).step() this.setData({ animationData:this.animation.export() }) }, rotateThenScale:function () { // 先旋转后放大 this.animation.rotate(45).step() this.animation.scale(2, 2).step() this.setData({ animationData:this.animation.export() }) }, rotateAndScaleThenTranslate:function () { // 先旋转同时放大，然后平移 this.animation.rotate(45).scale(2, 2).step() this.animation.translate(100, 100).step({ duration: 1000 }) this.setData({ animationData:this.animation.export() }) }})

wx.hideKeyboard()

收起键盘。

---