小程序加更-CSDN博客

本文链接：https://blog.csdn.net/qq_62230186/article/details/126697367

组件

text文本
view区域
button按钮
input表单
image图片
include包含
import导入

<view class="title">我喜欢小程序</view>
<view>最好的猎人，往往以猎物的形式出现</view>
<text>你好</text><text>喝杯白酒</text><text>交个朋友</text>
<view>{{msg}}</view>
<input placeholder="请输入"></input>
<image class="img" src="/images/pic.jpeg" alt=""/>
<!-- include相当于拷贝，就是不拷贝template的内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>

模板语法

文本渲染
条件渲染
列表渲染
自定义模板
import include

<view class="title">多重条件</view>
<view wx:if="{{score>90}}">苹果电脑</view>
<view wx:elif="{{score>80}}">小米笔记本</view>
<view wx:elif="{{score>70}}">苹果2斤</view>
<view wx:else>打一顿</view>

<view class="title">文本渲染</view>
<view>{{msg}}</view>

<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎回来</view>
<view wx:else>请先登录</view>

<view class="title">遍历</view>
<view wx:for="{{list}}" wx:key="item">{{index+1}}--{{item}}</view>

<view class="title">自定义遍历</view>
<view>定义item与index的名称</view>
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">
{{myind+1}}--{{myitem}}</view>

<view class="title">模板</view>
<import src="/template/test" />
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
<view class="title">include导入非template</view>
<!-- include相当于拷贝，就是不拷贝template的内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>

<view class="title">事件</view>
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
<view class="title">事件-传参</view>
<button type="primary" bindtap="showMsg" data-msg="白毛浮绿水">按钮1</button>
<button type="warn" bindtap="showMsg" data-msg="红掌拨清波">按钮2</button>

<view class="title">表单的双向绑定</view>
<input value="{{msg}}" bindinput="changeMsg" type="text" 
style="border: 1rpx solid #ccc; margin: 15rpx; padding: 15rpx;" />
<view>{{msg}}</view>

<view class="title">todolist</view>

事件

bindtap 触摸/点击
bindchange 值发生变化
bindconfrim 确认
bindinput 输入变化

表单的双向

// inputHd实现双向绑定
 inputHd(e){
   // 更新temp
   console.log(e)
   this.setData({temp:e.detail.value})
 },

响应式更新

this.setData({temp:’ '})
数据与视图都会更新 wx 的 api

微信内置的方法

wx.showToast({title:" ",icon:})
弹出提示 wx.showLoading()

微信小程序页面生命周期

onLoad—-监听页面加载
onReady—-监听页面初次渲染完成
.onShow—-监听页面显示
.onHide—-监听页面隐藏
onUnload—-监听页面卸载

用户首次打开小程序，触发 onLaunch（全局只触发一次）。
小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序从前台进入后台，触发 onHide方法。
小程序从后台进入前台显示，触发 onShow方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。

// pages/life/life.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("onLoad页面加载","有上一个页面传递参数")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("onReady页面准备完毕","可以操作组件")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("onShow","前台显示")
 },

   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("onHide","页面隐藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log("onUnload","页面卸载")
  },

小程序页面跳转

wx.navigateTo(有返回键，不可以跳转到tabBar页面)
wx.switchTab (没有返回键，只能跳转到tabBar页面，不可以携带参数)
wx.reLaunch(跳转任意页面，没有返回键，有首页按钮)
wx.redirectTo(关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)
wx.navigateBack(关闭当前页面，返回上一页面或多级页面，data值为1，表示跳转上一页，2表示跳两级)

npm使用，weapp为例

01 在项目的根目录 npm init -y 初始化项目
02 npm i @vant/weapp -S --production 安装
03 构建npm 编辑器-》工具-》构建npm
04 修改app.js
“style”: “v2” 去除
注册组件
“usingComponents”: {
“van-button”: “@vant/weapp/button/index”
},

05 修改project.config.json setting
“packNpmManually”: true,
“packNpmRelationList”: [
{
“packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./miniprogram/”
}
],

06 在组件中使用主要按钮

小程序自定义组件
一，创建组件
1、在根目录下自定义一个components文件夹，用来存放自定义的组件。

2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。

3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其声明为一个组件。

4、在wxml文件中做好组件的节点布局，比如以下代码：

<view class="outter">
  <view class="inner">我是自定义组件</view>
</view>

二、使用组件
1、在需要使用自定义组件的页面的json文件中注册组件。添加类似以下代码：

{
  "usingComponents": {
    "mybox":"/components/mybox/mybox",
    "mypage":"/components/mypage/mypage"
  }
}
其中"mybox"为组件名，"/components/mybox/mybox"为组件所在路径

2、然后在wxml模板文件中使用组件

<mybox></mybox>

分包

 "subpackages": [
    {
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],
  "preloadRule": {
    "pages/jok/jok": {
      "network": "all",
      "packages": [
        "news"
      ]
    }
  },

云开发

一，概念
1.云数据库（moogoDB）
2.云函数（nodejs）
3.云存储

二，作用
1.让前端脱离后端直接链接数据库和存储
2.写好nodejs ,根据一定的规则操作业务数据，链接数据库
在吧nodejs上传到云端
3.在客户端调用nodejs对应的方法，获取服务器数据

三，云函数定义
1.config配置
2.package.json 包管理
3.js逻辑

01 导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()
02 导入数据库
const db = cloud.database();
03 导出
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
   //当前微信的环境
  // event 调用函数传入的参数
  return  {} 返回的数据
})
！！云函数写好要上传到服务器

数据库操作

一，查
1.db.collection(“guest”).get()
2.skip() 跳过
3.orderby(“date”,“desc”) 日期从大到小
4.limit ()限制
5…count() 查询总数
二，增
1.db.collection(“guest”).add({data:{}})
// data是添加的数据
三，删除
db.collection(“guest”).doc(event.id).remove()