微信小程序基础讲解，云服务介绍，分包及使用方法

一，组件及基础属性介绍

1.属性介绍

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

2，容器组件

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

3.基础容器

1.text
介绍：user-select 可选文字
2.rich-text 富文本
3.icon 图标

4.表单

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

5.navigator 导航

1.open-type
介绍：
redirect，
switch-tap，
navigate，
relunch
2.url

6.媒体

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

7.其他

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>

2.使用

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

6.include

拷贝src中非template的内容

三，事件

属性	含义
bindtap	触摸/点击
bindchange	值发生变化
bindconfrim	确认
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

1.微信内置的方法

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

八，配置

1.全局配置 （app.json）
2.页面配置 （xxx.json）

 "backgroundTextStyle": "light",
背景文字颜色 light | dark
    "navigationBarBackgroundColor": "#f70",
背景颜色
    "navigationBarTitleText": "小程序基础语法",
导航栏表情
    "navigationBarTextStyle": "white"
导航栏+状态栏文字颜色  white | black

    "enablePullDownRefresh": true,
允许页面下拉刷新
     "usingComponents": {}
使用组件

九，页面生命

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

十，页面跳转

1.组件 （navigator）

1.path 跳转的页面
2.open-type

属性	含义
navigate	跳转
redirect	重定向（不理历史记录）
switchTab	切换底部栏
navigateBack

3.js进行跳转

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

十一，小程序页面栈

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

2.A=>B=>C=>D=>E （这个5个页面都会缓存）

3.页面跳转

属性	含义
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

“style”: “v2” 去除

注册组件
"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.步骤

01 创建一个组件
02 在页面中注册组件

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

03 在页面中使用组件

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

属性	含义
externalClasses	外部类
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.监听滚动 (onPageScroll)

3.回到顶部/固定位置

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

 wx.pageScrollTo({
      duration: 500,
      selector:".share"       
    })

4.获取设置/窗口信息 (wx.getSystemInfoSync())

5.获取电量 (wx.getBatteryInfoSync())

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文件夹wxParse

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