微信小程序的简单介绍

微信小程序

不校验合法域名方法： 工具> 详情> 本地设置勾选上不校验

事件响应：

bindatp=“函数名” bindinput=“表单发生变化” bindconfirm=“确认键” bindlongPress=“长按"

实现传参：

<view data-msg="参数" bindtap="tapHd">

e.target.dataset.msg

e.detail.value 表单的值

表单的双向绑定：

<input value="{{msg}} " bindinput="inputHd">

inputHd(e){

this.setDate({msg:e.detail.value})

}

 

 

api

界面类 ：

提示 ： wx.showToast({title,icon}) 确认框： wx.shaowModal({title,content,success,fail}) 显示加载提示：wx.showLoading()

数据缓存 ：

  wx.getStorageSync(key) 取                                                                                  wx.seetStoreageSync(key,value) 存

路由：

wx.navigateTo({url}) 普通跳转 wx.switchTab({}) 底部栏跳转 wx.navigateBack() 返回 wx.reLaunch({url}) 重启 wx.pageScrollTo({duration,scollTop}) 滚动页面

组件：

navigator url 跳转路径 /pages/要去的页面 ../要去的页面

open-type 打开类型 navigate 默认跳转 redirect 重定向 （原页面的历史记录呗跳转页面替换） switchTab 底部栏跳转 navigateBack 返回 exit 退出小程

生命周期

1.小程序的生命周期

onshw 前台显示                                                                                                                                onLaunch 启动                                                                                                                                    onHide 后台运行                                                                                                                                onError 错误                                                                                                                                  onPageNotFound 页面找不到

2.页面的生命周期

onLoad(option) 加载完毕 onReady 准备完毕 onHide 隐藏 onshw 显示 onUnload 卸载

页面传参

url="xxx?要传入的值=数据"

接收： onLoad(options){ options.数据值(获取的参数)}

全局数据

app.js globalData：{数据}

接收页面

var app=getApp() 在onShow 里面 app.globalData.值名=数据

微信小程序常用全局的方法

onReachBotton 触底刷新 onPullDownRefresh 下拉(下拉刷新) onShareAppMessage(){return {url,title,imageUrl}} 分享 onShareTimelime() 分享朋友圈 onAddToFavorites() 收藏 onPageScroll({scollTop:xxx}){} 页面的滚动

小程序的全局方法

页面栈

卸载与隐藏

正常的从A-->B会隐藏 正常的从A-->B redirect A会隐藏 正常A-->返回到首页 A页面会卸载 小结： redirect会卸载 navigateBack 会卸载 navigate缓存页面

小程序默认可以缓存5级页面

A-->B-->C-->D-->E 五个页面都存起来 A-->B-->C-->A-->E rediect 当前页面会销毁 A-->B rediect C-->D--<E wx.navgateBack({delta,2})

使用npm的教程

进入到项目的目录 npm init -y 初始化项目

安装：npm i -D miniprogram-api-typings

工具>构建npm

app.json 中引入

"usingComponents": { "van-button": "@vant/weapp/button/index" }

页面中使用

<van-button type="primary">按钮</van-button>

component 创建组件

properties属性 value:{ type:Number,value:1,//不传参默认值唯一}

data数据 methods 方法 lifetimes 生命周期 attached挂载完毕

组件传参

父传子 property

父组件里边使用 例如：<step value="10" >

子组件里边接收 例如： properties：{value：{type：Number，value：1}} 使用

this.data.value 使用-只读