app.js 整个小程序的主程
单个页面.js 页面的逻辑层
页面与主程之间的互相调用方法
let app = getApp( )
就可以通过 app . 主程里选项 . 主程的方法或者属性
只要用到 数据的地方都到双花括号 {{ }} key的值 不用双跨括号**{{ }}**
如果在别的地方 改变data中的数据 视图层不实时响应 但是是会改变的
使用 this.setData ( { msg : 2000 } ) 这样可以实时改变
如果想改主程 通过
let app = getApp( )
app . setData ( { key : value } ) 这样修改主程里的数据
修改 key的数据改为value
事件
< 组件 bind tap = " 方法 ">
绑定了tap的事件
绑定事件的方式
冒泡 : bind 绑定
不冒泡 : catch 绑定
传参
< bindtap " 实例方法 " data - a = "{{ 值 }} ">
传入的 参数 a
< bindtap " 实例方法 " data - a = "{{ 值 }} " data - b = "{{ 值 }} " >
如果要是传多个就多写几个data -
接参
参数在事件对象里在方法中接收事件对象查找参数
列表渲染
< 组件 wx : for = " {{ 数据 }} " > {{ item }} {{ index }} < 组件 >
wx:for 是循环
key 绑定的数据不用{{ }} 双花括号
{{ item }} 遍历的每个值 {{index}} 遍历的每个索引
如果item是对象的话,只要数据有id整个键 就直接写id
*this
*this 做key的话是数组中每一项数据的本身
条件渲染
wx:if ( 判断 )
wx : elif
三个只会显示一个 ↑ ↑ ↑ ↑
类似于v-show
true是隐藏 false 是显示
不渲染
自身不渲染 如果使用block 没有标签包裹
双向数据绑定
数据的双向绑定 model : value=" {{ value }}"
手动实现原理
this . setData( ipt : e.detail.value)
通过事件对象找到事件目标的值
生命周期
文档中的小程序app中的
App选项
页面中的page选项
下拉转发都有相对于的生命周期 在触发时写逻辑
rpx响应式布局
rpx采用的是双倍布局 ( 1px = 2rpx )
view 类似于 div
navigator
组件中 通过属性跳转是声明式跳转
跳转要加 url 地址
在Api中 是编程式跳转
传参
在onLoad( ) 中会接收一个参数
onLaunch( )中接收
就是别的路由传进来的参数
自定义组件
不是创建page 而是创建 component
**第三方组件 ** ( 小程序不识别 modules 目录) 小程序需要拿到dist里面的代码
npm init -y 初始化一次
npm i 包名 —— production
勾选使用npm模块
**1.**把modules 里面的 组件名—picker 里面的后缀为dist的文件 拷贝出来
然后使用自定义组件的注册方法
pc端: elementUi / iview / antd
移动端: vant / mintUi / ameizi / antd-m
使用weui库
在App.josn 中 注册 用一个组件注册一个
在根元素下面 …/ 没有效果 比如在 全局的app.json 中
小程序API
类似于封装好的方法 , 在wxml 中添加事件触发
使用API里面的方法并按规定要求传参
媒体里video创建视频实例
类似于Vue 中的 ref 可以使用里面的数据和方法
获取到保存到 变量中
云环境
如果切换了用户 需要到logo 创建并部署 只要切换都要操作
如果要操作mogodb的数据库 在云开发里有高级操作里面就有增删改查
数据推送
A页面修改了集合,B页面事先监听了这个集合,就会收到更新后的数据,这个数据是后端推送出来的(广播)
//服务端推送(发布) 有微信的服务器完成
创建云环境
方案1: 云开发模板环境
方案2:非云开发环境改装成云开发环境
在project.config.json 添加云函数目录
"cloudfunctionRoot": "cloudfunctions/",
工作区创建cloudfunctions目录
环境切换到对应环境
生成login云函数(手写,或者同步已有云函数)
在cloudfunctionRoot 右击同步云函数
在app.js中 onLanch方法添加
if (!wx.cloud) {
console.error(‘请使用 2.2.3 或以上的基础库以使用云能力’)
} else {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
// env: ‘my-env-id’,
traceUser: true,
})
}
app.js 指定环境env
项目中图片要加后缀
连接库
const db = wx.cloud.database( );
export default ( 可以接收参数 ) => new Promise( ( reslove , reject ) => { })
import 变量名 from " 地址 "
在 应用地方进行传参 变量名 ( 传入参数 )
轮播图组件 swiper 里面要嵌套
swiper-item 组件
里面可以放图片 按钮
如果改变了 data里如果有数据 改变了
如果要想改变视图层跟逻辑层 需要用setData( { } )来改变
小程序页面下拉怎么让他自动往上收的把
把获取详情页的数据整合好 , 通过路由传参给详情页
修改数据的数组 setdata( list : 原本的老数组 concat 新的数组 )
将新老数组合并之后在 替换老数组
骨架屏
用if else 在wxml中 进行判断
页面是wx- for 渲染的
点击当前的选项 将这个页面上的标题代到下一个页面、
它是怎么跳转并且把标题给要到的详情页组件的
product( 自己封装的组件 )
这里循环遍历数组 数组里是每一项的对象 然后当前拿到当前那一项的item 然后通过自定义属性传参的方式 将具体的自己的数据对象 然后在组件中进行遍历自己的数据
然后跳转 并携带数据
然后在组件中用自定义 传接组件的方式 进行拿去数据
下拉刷新
在逻辑层设置 loadign 状态 为true 还是false 如果为true 就显示上拉组件样式 如果为false 则隐藏
上拉加载更多
创建组件
如果下拉
传入两种状态 在组件中接收 并在页面进行判断
先判断整个组件是否显示或者隐藏 然后判断
里面的数据 是 玩命加载 还是 没有数据