小程序项目随笔—— 01

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的文件 拷贝出来

然后使用自定义组件的注册方法

使用weui库 第三方组件库

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 则隐藏

上拉加载更多

根据触底小程序api来判断 如果快要触底执行相对事件

创建组件

如果下拉

传入两种状态 在组件中接收 并在页面进行判断

先判断整个组件是否显示或者隐藏 然后判断

里面的数据 是 玩命加载 还是 没有数据