小程序云开发 基础介绍

一 、组件的基础属性介绍

属性介绍

属性	含义
text	文本
view	区域
button	按钮
input	表单
iamge	图片
include	包含
import	导入
web-view	导入html页面

容器组件

属性	含义
view	试图区域
swiper、swiper-item	幻灯片、轮播图
scroll-view	滚动试图

基础容器

text  介绍:user-select可选文字

rich-text 富文本

icon 图标

表单组件

1. button 介绍:type、size、自定义
2. input 输入
3. textarea 文本区域
4. switch

navigator 导航

1. open-type 介绍:redirect、switch-tap、navigate、relunch
2. url

媒体

1. image 介绍:src mode模式 lazy-load懒加载 
2. video 视频

其他

1. map 地图
2. web-view  web试图

二 、模板语法

1、文本渲染
{{}}

2、条件渲染
wx:if="{{}}"

wx:elif="{{}}"

wx:else

3、列表渲染
wx:for="{{list}}"、{{item}}、{{index}}

wx:key="title"

4、自定义列表
wx:for="{{list}}"

wx:for-item="myitem"

wx:for-index="ind"

{{myitem}}

{{ind}}

5、import

1、定义模板 test.wxml 然后使用

<temp name="user">
<view>用户名：{{name}}</view>


<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>

6、include

拷贝src中非template的内容

属性	含义
bindtap	触摸/点击
bindchange	值发生变化
bindconfrim	确定
bindinput	bindinput

三 、表单的双向绑定

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

四 、事件的传参数

<button bindtap="showMsg" data-msg=“你好，靓”>
showMsg(e){
     e.target.dataset.msg
}

五、响应式更新

this.setData({temp:''})

数据与试图都会更新

六、wx的api(微信内置的方法)

wx.showToast({title:"",icon:})
//弹出土司提升
wx.showLoading()
wx.request()
//网络请求工具
wx.stopPullDownRefresh()
//停止下拉刷新
wx.setStorageSync(key,value)
wx.getStorageSync(key)
 //本次存、取

七、配置

1、全局配置

2、页面配置

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

八、页面声明

属性	含义
onLoad	页面加载
onPullDownRefresh	下拉刷新
onReachBottom	触底

九、页面跳转

1、组件(navigator)

2、open-type

属性	含义
navigate	跳转
redirect	重定向
switchTab	切换底部栏
navigateBack

3、js进行跳转

属性	含义
wx.navigateTo	跳转
wx.switchTab	底部栏切换
wx.redirectTo	重定向
wx.navigateBack()	返回

十、小程序页面栈

1、小程序默认会缓存5个页面栈

2、页面跳转

属性	含义
navigate	添加一个缓存页面栈
navigateBack	移除一个页面栈
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
注册组件

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },

5、修改project.config.json setting

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

6、在组件中使用

<van-button type="info">主要按钮</van-button>

十三、小程序的生命周期

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

十四、页面的声明周期

1、介绍

属性	含义
onLoad	加载、可以获取页面传递的参数
onShow	前台显示、开始播放视频
onReady	初次渲染完毕、操作组件或者dom
onHide	隐藏、停止播放
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、在页面中使用组件

2、组件的构造函数(Component)

属性	含义
extemalClasses	外部类
properties	父组件传入的属性(参数)
data	组件内部的数据
methods	组件的方法

3、组件的传参(父传子)
1、父页面

<item title="收藏夹">
2、子组件接收

properies：{
   title:{type:String,value:''}
}
子组件页面wxml使用
{{title}}
子组件js的methods中使用
this.data.title

3、子传父

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

4、外部类

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

十七、wx

1、登录
1、getUserProfile只能获取到用户的头像和昵称，不能作为唯一标识符合与后端进行交互

01、wx.login() 获取code把code发送给自己服务器（也可以加userInfo）

02、自己的服务器向微信服务器发送code+appid+AppSecret换取唯一标识符 openid

03、通过openid可以实现登录，注册，权限等功能

2、回到顶部/固定位置

  wx.pageScrollTo({
      duration: 500, //时间
      scrollTop:0, //位置
    })
 
 wx.pageScrollTo({
      duration: 500,
      selector:".share"       
    })

3、监听滚动(onPageScroll)
4、获取设置/窗口信息(wx.getSystemlnfoSync())
5、获取电量(wx.getBatterylnfoSync())
6、获取网络状态(wx.getNetworkType())
7、打电话/发短信
 

wx.makePhoneCall({
      phoneNumber: '13598859747',
    })

8、下载网络图片(权限)

 wx.downloadFile()
 
 wx.saveImageToPhotosAlbum()

//保存到相册
9、上传图片

 wx.chooseMedia({
      count:1})
 
 wx.uploadFile({
          filePath: res.tempFiles[0].tempFilePath
})

10、设置标题
 

wx.setNavigationBarTitle({
          title: '自定义组件',
        })

十八、小程序的限制

1、打包上传每个每个包不超过2M 总大小16M
2、本地存储 每次1M 总大小10/0M
3、底部栏2-5个
4、页面栈5个

十九、分包

1、介绍
打开小程序,默认值下载主包

小程序的打开速度加快

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

2、分包

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

3、分包预加载

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

二十、插件使用(wxParse)

1、作用:html转换为wx的组件
2、Copy文件夹
3、在页面js导入文件(地址是否正确)

var WxParse = require('../../wxParse/wxParse.js');

4、导入css

@import "/wxParse/wxParse.wxss";

5、引用数据

var that = this;
WxParse.wxParse('article', 'html', res.result.content, that, 5);

6、导入使用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

二十一、云开发

1、概念
云数据库(moogoDB)

云函数(nodejs)

云存储

2、作用:
让前端脱离后端直接连接数据库和存储

写好nodejs、根据一定的规则操作业务数据,连接数据库

在吧nodejs上传到云端

在客户端调用nodejs对应的方法,获取服务器数据

3、云函数定义
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  {} 返回的数据
})

注意: 云函数每次修改都要重新上传到服务器

4、调用云函数
wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称，
data 传入的参数
5、数据库操作
1、查

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

2、增

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

db.collection("guest").doc(event.id).remove()
6、云文件的操作
1、wx.cloud.uploadFile({})

项目	value
cloudPath	文件名(存储到服务器的)
path	本地缓存文件
success	成功
res.fileID	文件地址

2、wx.chooseMedia({})

        count:9  最多选择数量

        res.tempFiles[i].tempFilePath