小程序项目随笔—— 01

本文主要是介绍小程序项目随笔—— 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 则隐藏

上拉加载更多

创建组件

如果下拉

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

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

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

这篇关于小程序项目随笔—— 01的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！