微信小程序详细内容+云开发

目录

一、微信小程序开发

二、文件介绍

 三、基础组件（基本基础组件，更多详细请查看微信开发文档）

 四、模板语法

 一、文本渲染   {{表达式}}

二、条件渲染

三、列表渲染

四、自定义列表

五、import

六、include

五、事件

六、表单的双向

七、事件的传参数

八、响应式更新

九、wx 的api

十、配置

十一、页面生命

十二、页面跳转

十三、小程序页面栈

十四、页面传参

十五、npm使用插件 weapp为例

十六、小程序的生命周期

十七、页面的生命周期

十八、全局数据

十九、自定义组件

一、定义步骤

二、组件的构造函数 Component

三、组件的传参 （父传子）

四、子传父

五、外部类

二十、分包

二十一、云开发

一、概念：

二、作用：

三、云函数定义

四、调用云函数

五、数据库操作

六、云文件的操作

---

一、微信小程序开发

1.  https://mp.weixin.qq.com/ 注册账号
2. https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html  下载开发工具
3. 创建项目

二、文件介绍

1. 全局配置
   小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，直接在pages中创建新元素可自动生成文件

 2.创建文件说明

        . js文件、.json 配置文件、 .wxml页面文件、 .wxss文件样式

 三、基础组件（基本基础组件，更多详细请查看微信开发文档）

1. viwe 常用组件类似于 div
2.  text 用来输入文本
3. button 按钮
4. input 表单
5. image 图片
6. web-view 导入html页面 （<web-view src="地址"></web-view>）
7. map  地图 
8. navigator 跳转

 四、模板语法

 一、文本渲染   {{表达式}}

二、条件渲染

wx:if="{{}}"

wx:elif="{{}}"

ex:else

三、列表渲染

wx:for="{{list}}"  wx:key="title"

四、自定义列表

    wx:for="{{list}}"
wx:for-item="myitem"   {{myitem}}
wx:for-index="ind"    {{ind}}

五、import

 1.定义模板  test.wxml
<temp name="user">
<view>用户名：{{name}}</view>
 2.使用
<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>

六、include

    拷贝src中非template的内容

五、事件

1.  bindtap 触摸/点击
2.     bindchange 值发生变化
3.     bindconfrim 确认
4.     bindinput 输入变化

六、表单的双向

1.     <input value="{{temp}}" bindinput="inputHd">
2.     this.setData({temp:e.detail.value})
3.     获取事件对应表单的值  e.detail.value

七、事件的传参数

wxml：<button bindtap="showMsg" data-msg=“你好”>
    

ja:showMsg(e){
     e.target.dataset.msg
}

八、响应式更新

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

九、wx 的api

1.     微信内置的方法

2.     wx.showToast({title:"",icon:})  弹出土司提升

3.     wx.showLoading()

4.     wx.request()  网络请求工具

5.     wx.stopPullDownRefresh()停止下拉刷新

6.     wx.setStorageSync(key,value) ；wx.getStorageSync(key)  本次存、取

十、配置

   一、 全局配置文件 app.json
   二、 页面配置  xxx.json

1.     "backgroundTextStyle": "light",背景文字颜色 light | dark
2.     "navigationBarBackgroundColor": "#f70", 背景颜色
3.     "navigationBarTitleText": "小程序基础语法", 导航栏表情
5.    "navigationBarTextStyle": "white"
6.   导航栏+状态栏文字颜色 white | black 
7.    "enablePullDownRefresh": true,允许页面下拉刷新
8.    "usingComponents": {} 使用组件  

十一、页面生命

1.     onLoad 页面加载
2.     onPullDownRefresh 下拉刷新
3.     onReachBottom  触底

十二、页面跳转

   一、 页面组件跳转  navigator

        1.path 跳转的页面
        2.open-type
            navigate 跳转
            redirect 重定向（不理历史记录）
            switchTab 切换底部栏
            navigateBack
 二、   js进行跳转
        wx.navigateTo 跳转
        wx.switchTab 底部栏切换
        wx.redirectTo 重定向
        wx.navigateBack() 返回

十三、小程序页面栈

1.     小程序默认会缓存5个页面栈
2.     A=>B=>C=>D=>E  这个5个页面都会缓存
3.     navigate 添加一个缓存页面栈
4. navigateBack 移除一个页面栈
5. redirect 替换一个一个页面栈

十四、页面传参

 1.传递参数
<navigator url="xxxx?docid=yyyy&title=zzz"

2. 获取参数:
onLoad(options){
    //options.docid,options.title
}

十五、npm使用插件 weapp为例

1.在项目的根目录 npm init -y 初始化项目

2.npm i @vant/weapp -S --production 安装

3.构建npm 编辑器-》工具-》构建npm

4.修改app.js     

"style": "v2" 去除
    注册组件
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },

5.修改project.config.json

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

6.在组件中使用
    <van-button type="info">主要按钮</van-button>

十六、小程序的生命周期

1.     onLaunch 启动
2.     onShow 前台显示
3.     onHide 后台运行

十七、页面的生命周期

1.     onLoad 加载  可以获取页面传递的参数     
2.     onShow 前台显示       开始播放视频
3.     onReady 初次渲染完毕       操作组件或者dom
4.     onHide 隐藏         停止播放
5.     onUnload 卸载

十八、全局数据

1. app.js     定义全局数据

  globalData: {    
    num:5
  }

 2.页面

1.     获取app const app = getApp();
2.     onShow中用全局数据更新本地数据 this.setData({count:app.globalData.num})
3.     更新时候要更新本地和全局

 addCount(){
    // 更新本地count
    this.setData({
      count:this.data.count+1
    })
    // 更新全局的num
    app.globalData.num +=1
  },

十九、自定义组件

一、定义步骤

1. 创建一个组件

2. 在页面中注册组件

 "usingComponents": {
    "item":"/components/item/item"
  }

3.在页面中使用组件 <item></item>

二、组件的构造函数 Component

1.  externalClasses 外部类
2.   properties: 父组件传入的属性（参数）
3. data 组件内部的数据
4. methods 组件的方法

三、组件的传参 （父传子）

  1.  父页面 <item title="收藏夹">
   2. 子组件接收

properies：{
   title:{type:String,value:''}
}

子组件页面wxml使用 {{title}}
子组件js的methods中使用 this.data.title

四、子传父

1. 子组件js ：this.triggerEvent("toggle",{value:true})
2. 父组件 wxml ：<item bind:toggle="toogleHd">
3. 父组件.js：toggleHd(e){   //获取  e.detial.value}

五、外部类

1. 子组件.js ：externalClasses:[item-class]
2. 子组件.wxml ：<view class="item item-class">
3. 父组件wxml传入 ：<item item-class="myItem">
4. 父组件.wxss ：.myItem{ height:100rpx !important!;color:red;}

二十、分包

一、底部栏的导航就是主包

打开小程序 默认只下载主包
小程序的打开速度加快

通过分包可以让项目更加庞大

二、分包

    "subpackages": [
    {
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],

三、分包预加载

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

二十一、云开发

一、概念：

云数据库（moogoDB）
云函数（nodejs）
云存储

二、作用：

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

三、云函数定义

1.config配置

2.package.json 包管理

3.js逻辑

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

四、调用云函数

wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称，data 传入的参数

五、数据库操作

一、查

1. db.collection(“guest”).get()
2. skip() 跳过
3. orderby("date","desc") 日期从大到小
4. limit ()限制
5. .count() 查询总数

二、增

db.collection("guest").add({data:{}})  // data是添加的数据

三、删除 

 db.collection("guest").doc(event.id).remove()

六、云文件的操作

1. db.collection("guest").doc(event.id).remove()

cloudPath 文件名（存储到服务器的）
path 本地缓存文件
success成功  res.fileID文件地址

2.wx.chooseMedia({})

count:9,最多选择数量
 res.tempFiles[i].tempFilePath