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

一，组件及基础属性介绍

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”

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 输入变化

四，表单的双向

<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"
1
2.获取参数:
onLoad(options){
    //options.docid,options.title
}

十三，npm使用 weapp为例

在项目的根目录 npm init -y 初始化项目
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;}

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: '自定义组件',
        })

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