微信小程序的消息框

wxml

<import src="/dist/toast/index.wxml" />

<view class="container">

<view class="doc-title">显示</view>

<view class="zan-btns" style="margin-top: 30vh">

<button class="zan-btn" bindtap="showToast"配盯>

点击显示

<激袭/button>

</view>

</view>

<template is="zan-toast" data="{{ zanToast }}"></template>

js

var Zan = require('../../dist/index')

Page(Object.assign({}, Zan.Toast, {

data: {},

showToast() {

this.showZanToast('收费标准每小时3元...')

}

}))

效果是下面这样

你可以在网上明卖兄下一个小程序的ui框架，这样方便很多

需要引入第三方UI组件  Vant-Weapp

打开终端，输入cd 拖拽项目文件到终端，然后输入命令npm init

此时，输入package name名称，一直点辩芹源回车就行

出现Is this OK?(yes)，直接回车即可

在终端输入命令npm i vant-weapp -S --production

在回过头看，在微信小程序开发工具中会多一个文件package.json，携态在这里面就可以进行包的配置首颤。

这个时候可以在项目文件夹中看见一个新生成的文件夹miniprogram_npm，其中就有我们刚刚安装好的vant组件库

这里要注意，一定是将引入的第三方组件写入“usingComponents”的字典中，如果写成平级的话，会提示page.json [vant-button]无效

<vant-button type="danger">微信登陆</vant-button>

1、提供微信小程序页概念：支持分享当前信息。

2、可以分享到对话，支持分享给单个好友及微信群。

3、微信小程序可以被搜索，但微信会极力限制搜索能力，目前提供的搜索功能是用户可直接根据名称或品牌搜索小程序。

4、在微信小程序与公众号为同一开发主体的前提下，提供微信小程序与微信公众号之间的关联。

5、线下扫码：提供线下提示用户附近有哪些微信小程序存在的功能。用户可以通过线下扫码使用，这也是微信提倡的接配慧入方式。

6、微信小程序支持挂起状态，即多窗口概念，用户可以把微信小程序先挂起，然后做别的事情，在需要这个微信小程序的时候可以快速调用，回到最开始的状态。

7、商户可以发送模板消息给接受过服务的用户，用户可以在微信小程序内联系客服，支持文字和图片，解迅卖戚决用户与微信小程序的沟通问题。

8、用户使用亩陵过的微信小程序会被放入列表，方便下次使用。

---