怎样解决小程序的温馨提示

一般情况下，可以通过以下几种方式解决小程序的温馨提示：

1. 使用相关的API接口，例如微信小程序的wx.showToast()函数，可以轻松地显示温馨提示。

2. 利用CSS来实现温馨提示的效果，例如使用边框和颜色来提示用户，或者使用d出窗口来显示提示信息。

3. 使用JavaScript来实现温馨提示的效果，例如使用alert()函数来d出提示框，或者使用confirm()函数来提示用户确认 *** 作。

微信小程序开发中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()

收起键盘。

微信小程序自带的API中的页面交互功能，虽然提示功能非常全面，但是所有的交互API中是没有可以自己在提示框中输入文本的功能，那么现在我们来自己做这样的一个提示框（可以带有输入功能），在提示框输入完内容之后，点击确定，可以将文本内容返回，点击取消则可以回到之前的状态。

（在这里，主页面的布局可以根据每个人的想法来布局，这里展示的css之后展示提示框部分的）

1、首先打开微信开发者工具，建立一个代码模板，那么我们这个提示框就是写在这个页面上。

    这里我们主页面叫做index

2、在基本页面中写上一个姓名的文本，当前姓名用<text>{{stuName}}</text>表示，然后为一个button按钮，再在js文件中，建立相应的点击事件以及stuName的信息。这样，一个原始页面就写好了。

下面我们开始d出框页面的制作

<view class='toast-box' hidden='{{!ifName}}'>

<view class='toastbg'></view>

<view class='showToast'>

<view class='toast-title'>

<text>修改姓名</text>

</view>

<view class='toast-main'>

<view class='toast-input'>

<input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>

</view>

</view>

<view class='toast-button'>

<view class='button1'>

<button catchtap='cancel'>取消</button>

</view>

<view class='button2'>

<button catchtap='confirm'>确定</button>

</view>

</view>

</view>

</view>

3、我们可以发现，点击按钮后d出输入框，如果点击除取消和确定之外的地方，是不会有反应的。为了做到这个功能，我们用一个绝对位置的渲染层（toastbg），覆盖住整个页面，并且如果你的页面长度没有滚动的话，请输入min—height：100vh，如果页面发生滚动，请把长度控制在height：100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明，opacity：0.2，即可

4、bindinput为写文本时所触发的事件，data-name为文本数据所保存的地方，在js中我们可以把这个数据打印出来，会发现我们所输入的文本信息。

以下为css的代码

.toast-box {

width: 100%

height: 100%

opacity: 1

position: fixed

top: 0px

left: 0px

}

.toastbg {

opacity: 0.2

background-color: black

position: absolute

width: 100%

min-height: 100vh

}

.showToast {

position: absolute

opacity: 1

width: 70%

margin-left: 15%

margin-top: 40%

}

.toast-title {

padding-left: 5%

background-color: #2196f3

color: white

padding-top: 2vh

padding-bottom: 2vh

border-top-right-radius: 16rpx

border-top-left-radius: 16rpx

}

.toast-main {

padding-top: 2vh

padding-bottom: 2vh

background-color: white

text-align: center

}

.toast-input {

margin-left: 5%

margin-right: 5%

border: 1px solid #ddd

padding-left: 2vh

padding-right: 2vh

padding-top: 1vh

padding-bottom: 1vh

}

.toast-button {

display: flex

}

.button1 {

width: 50%

}

.button2 {

width: 50%

}

.button1 button {

width: 100%

background-color: white

color: red

border-radius: 0px

border-bottom-left-radius: 16rpx

}

.button2 button{

width: 100%

background-color: white

color: black

border-radius: 0px

border-bottom-right-radius: 16rpx

}

.picker {

padding-top: 1vh

padding-bottom: 1vh

}

我们可以根据自己的喜欢，对提示框的样式进行改变

5、编写js代码，我们需要实现以下一些基本功能（点击出现d窗，取消不改变数据值，确定进行判断数据值，若为空则不能改变，否则可以改变，并且主页面上的内容要变为相应改变后的内容）

6、给最外层的d窗附上hidden（如图所示），为这个值初始为false，点击按钮后触发事件，改false为true，这样即可点击出现d窗。

7、为取消按钮附上点击事件，与hidden的部分刚好相反即可。

8、为书写文本绑定事件，上述代码中命名为setValue，这个函数我们传入一个event进去，将其打印，我们可以发现在其的detail中有我们刚刚所书写的内容，我们将这个值，传给js中data一个属性，这里我们命名为edit。

9、为确定绑定事件，用this.data.edit将这个值进行判断，若为空，我们用wx.showToast提示用户信息没有填写完整，并且页面不会改变。若不为空，则我们setData一下我们的stuName为这个edit的值，并且重新把hidden的属性值改为false。

10、返回到初始页面我们就可以看到我们自己做得一个提示框，并且具有修改值的功能

---