微信小程序超详细基础

一、配置

1. 全局配置

1.全局配置在app.json中进行配置

2.pages存放页面的路径，第一个就是首页，可自由更换

3.window窗口信息

"backgroundTextStyle": "light",
背景颜色
"navigationBarBackgroundColor": "#f30",
导航栏背景颜色
"navigationBarTitleText": "亮亮玩小程序",
导航栏标题
"navigationBarTextStyle": "white"
导航栏文本颜色 white | black 只有黑白两种

2. 页面配置

1.同 app.json window 配置只对当前页面启用 会覆盖全局配置

2.配置下拉刷新

"enablePullDownRefresh": true,
允许下拉刷新
"backgroundTextStyle": "dark",
背景文字颜色（下拉才能看见）
"backgroundColor": "#f30",
背景颜色（下拉才能看）

二、页面结构

1.xxx.js 业务逻辑

2.xxx.json 页面的配置

3.xxx.wxml 页面的模板

4.xxx.wxss 页面样式

三、wxss的单位

小程序单位 rpx （750rpx 就是一个屏幕的宽） 375就是屏幕的一半

四、基础组件

1.view 容器 text 文本 image 图片 input 表单 template 模板

2.navigator跳转url

跳转的页面

/pages/todo/todo
../todo/todo

open-type 打开类型

navigate 默认跳转

redirect 重定向（原页面的历史记录被跳转页面替换）

switchTab 跳转到底部栏对应页面

navigateBack 返回

relaunch 重置

五、渲染指令

1. 文本渲染指令 {{}}

2.条件

wx:if="{{}}"
wx:elif="{{}}"
wx:else 其他

3.遍历

1.wx:for="{{遍历的数据}}" 需要指定wx:key="index" index遍历元素的下标 item 代表变量的元素对象，数组，数字，字符串都可以被遍历

2.自定义item与index(多重遍历)

wx:for="list" wx:for-item=="myitem" wx:for-index="ind" wx:key="ind"

4. include

把文件单纯拷贝过来<include src="url">

5.import+template

1.定义template
<template name="user">
用户名：{{name}}
</template>

2.使用
<import src="url">
<template name="user" data={{...list[0]}}>

六、事件

1.事件响应

bindtap=“函数名” 被点击

bindinput=“” 表单发生变化

bindconfirm="" 确认键

bindlongPress=“” 长按

2.实现传参

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

e.target.dataset.msg

e.detail.value 表单的值

3.表单的双向绑定

<input value="{{msg}}" bindinput="inputHd"> 页面内容

js内容
inputHd(e){
this.setData({msg:e.detail.value})
}

七、api

1.网络请求

wx.request({
url,method,header,success,fail,complete
})

2.界面类

wx.showToast({title,icon}) 提示

wx.showModal({title,content,success,fail})) 确认框

wx.showLoading() 显示加载提示

3.数据缓存

wx.getStorageSync(key) 取出本地缓存

wx.seetStoreageSync(key,value) 本地缓存

4.路由

wx.navigateTo({url}) 普通跳转

wx.redirectTo({url}) 重定向

wx.switchTab({}) 底部栏跳转

wx.navigateBack() 返回

wx.reLaunch({url}) 重启

wx.pageScrollTo({duration,scrollTop}) 滚动页面

八、生命周期

1.小程序的生命周期

onLaunch 启动

onShow 前台显示

onHide 后台运行

onError 错误

onPageNotFound 页面找不到

2.页面的生命周期

onLoad(option)加载

onShow显示

onHide隐藏

onReady准备完毕（操作节点）

onUnload卸载

九、常用全局方法

onReachBottom 触底

onPullDownRefresh 下拉

onShareAppMessage(){return {url,title,imageUrl}} 分享

onShareTimelime() 分享朋友圈

onAddToFavorites() 收藏

onPageScroll({scrollTop:xxx}){} 页面滚动