微信小程入门、事件及多媒体组件等学习（一）

需要准备的东西

学习微信小程序，需要先在微信公众平台注册账号，这里需要选定小程序，然后按照提示步骤进行注册，在注册好后，会在开发部分产生一个AppId，这个在后期项目新建及导入项目会使用到。

在注册后，需要下载微信开发者工具，在这里下载你的电脑使用版本，并进行安装。

（进入上面两个都需要微信扫码）

开发小程序的官方文档可以进入小程序开发文档进行查看。

 

项目简介

在初始化项目后，打开：

是上图的这个样子。

app.json

对小程序做全局配置，包括标题等。

1. pages字段  --用于描述当前小程序页面路径，为了让微信客户端知道你的小程序定义在哪个页面
2. window字段--定义小程序所有页面的顶部背景颜色、文字颜色等。
3. tarBar字段---底部导航

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./assets/tab-bar/home.png",
        "selectedIconPath": "/assets/tab-bar/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "./assets/tab-bar/user.png",
        "selectedIconPath": "/assets/tab-bar/user-active.png"
      }
    ]
  }
}

每个具体页面内的json文件，也可修改自己的顶部导航文字：

{
    "navigationBarTitleText": "消费信息"
}

WXML

就是每个页面写页面结构的部分

例如：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" 
      open-type="getUserInfo" 
      bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" 
        class="userinfo-avatar" 
        src="{{userInfo.avatarUrl}}" 
        background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

view类似于之前的div等。

WXSS

例如：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

注意：尺寸单位变为了rpx。

js

整体开发起来像是vue和react混合体，既有data和{{}} 以及wx:if，也有setState，还有小程序特有的生命周期，

1.app.js是应用的入口

App({
  onLaunch: function () {
    console.log('小程序启动！')
  }
})

index.js

const app = getApp()
Page({
	data: {
		todos:['吃饭','睡觉','打豆豆']
	},
	onLoad(){
		console.log('index页面加载')
	},
	onShow(){
		console.log('index页面显示')
	},
	onHide(){
		console.log('index页面隐藏')
	},
})

wxml页面渲染

<view wx:for="{{ todos }}">
	<view>{{index}}:{{item}}</view>
</view>

 

事件

1.什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

2.事件的使用方式

• 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• 在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

多媒体

图片

<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

音频

wxml部分：

<audio
    poster="{{poster}}"
    name="{{name}}"
    author="{{author}}}"
    src="{{src}}"
    id="myAudio"
    controls
    loop
  ></audio>
  <!-- </view> -->
  <button type="primary" bindtap="audioPlay">播放</button>
  <button type="primary" bindtap="audioPause">暂停</button>
  <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
  <button type="primary" bindtap="audioStart">回到开头</button>

js部分：

onReady(e){
    // 使用wx.createAudioContext获取audio上下文context
    this.audioCtx = wx.createAudioContext('myAudio');
  },
  data:{
    poster:'https://y.gtimg.cn/music/photo_new/T002R300x300M000001VUAQr2iQM54.jpg?max_age=2592000',
    name:"撒野",
    author:'李蚊香',
    src:'https://ws.stream.qqmusic.qq.com/M500001vfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C60148D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
    // src:'../../assets/Deepmaniak- Just Like This.mp3'
    position:'back'
  },
  audioPlay(){
    this.audioCtx.play()
  },
  audioPause(){
    this.audioCtx.pause()
  },
  audio14(){
    this.audioCtx.seek(14)
  },
  audioStart(){
    this.audioCtx.seek(0)
  },

相机

  <camera
    flash="off"
    binderror="error"
    style="width:100%;height:300px;"
    device-position="{{position}}"
  ></camera>
  <button type="primary" bindtap="takePhoto">拍照</button>
  <button type="primary" bindtap="changePosition">翻转</button>
  <view>预览</view>
  <image mode="widthFix" src="{{src}}"></image>

js部分：

  takePhoto(){
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res) =>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  // 摄像头翻转
  changePosition(){
    this.setData({
      position:this.data.position === 'back'?'front':'back'
    })
  },
  error(e){
    console.log(e.detail)
  }

小程序路由的切换

1.switchTab切换tab

2.redirectTo跳转页面

wx.switchTab({
	url: '/index'
})

弹窗

三个

//弹窗
wx.showToast({
  title:'成功',
  icon:'success',
  duration:2000
})

//加载提示框
wx.showLoading({
  title:'加载中....'
})
setTimeout(() => {
  wx.hideLoading()
},2000)


//显示模态框
wx.showModal({
  title: '提示',
  content:'这是一个模态框',
  success(res){
    if(res.confirm){
      console.log('确认');
    }else if(res.cancel){
      console.log('cancel');
    }
  }
})

网络请求

//ajax请求
 wx.request({
   url:'http://localhost:3000/test',
   success(res){
     console.log('res',res.data);
   }
 })

 

当然还有很多