2021-12-21

app.json

@@ -23,7 +23,7 @@
         "pages/test/textarea",
         "pages/test/audio",
         "pages/test/image",
-        "pages/test/vedio",
+        "pages/test/video",
         "pages/test/camera"
     ],
     "window": {

pages/index/index.js

@@ -44,7 +44,7 @@ Page({
         pages:[
           {title:'audio组件',url: "../test/audio"},
           {title:'image组件',url: "../test/image"},
-          {title:'vedio组件',url: "../test/vedio"},
+          {title:'video组件',url: "../test/video"},
           {title:'camera组件',url: "../test/camera"}
         ]
       }

pages/test/audio.js

@@ -5,18 +5,25 @@ Page({
      * 页面的初始数据
      */
     data: {
-        poster:'https://img.1ting.com/images/special/15/s300_2e0d202a2f39d3431d53053dac7f49c0.jpg',
+        poster:'',
-        name:'朋友',
+        name:'删了吧',
-        author:'周华健',
+        author:'许佳豪',
-        src:'https://www.1ting.com/api/audio?/2021/12/08/08b_zd/01.mp3'
+        src:'https://mp3.haoge500.com/upload/320/2021/11/11/1234749.mp3'
+    },
+    audioPlay:function(){
+        this.audioCtx.play();
+    },
+    audioPause:function(){
+        this.audioCtx.pause();
+    },
+    audioSeek0:function(){
+        this.audioCtx.seek(0);
     },
-
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-        const audioCtx=wx.createInnerAudioContext();
+        this.audioCtx=wx.createAudioContext('myAudio');
-        audioCtx.src='https://mp3.haoge500.com/upload/320/2021/11/11/1234749.mp3';
     },
 
     /**

pages/test/audio.wxml

@@ -3,4 +3,7 @@
 <view class="demobox">
     <view class="title">播放网络音频</view>
     <audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls="true" loop="true"></audio>
+    <button size="mini" bindtap="audioPlay">播放</button>
+    <button size="mini" bindtap="audioPause">暂停</button>
+    <button size="mini" bindtap="audioSeek0">回到开头</button>
 </view>

pages/test/camera.js

@@ -7,12 +7,19 @@ Page({
     data: {
         
     },
-
+    takePhoto:function(){
+        this.cameraCtx.takePhoto({
+            quality:'high',
+            success:(res)=>{
+                this.setData({src:res.tempImagePath});  
+            }
+        });
+    },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-
+        this.cameraCtx=wx.createCameraContext();
     },
 
     /**

pages/test/camera.wxml

@@ -1,2 +1,8 @@
 <!--pages/test/camera.wxml-->
 <text>pages/test/camera.wxml</text>
+<view class="demobox">
+  <view class="title">开启相机</view>
+  <camera device-position="back" flash="auto" style="width: 100%;height: 300px;"></camera>
+  <button type="primary" bindtap="takePhoto">拍照</button>
+  <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
+</view>

pages/test/image.wxml

@@ -1,2 +1,14 @@
 <!--pages/test/image.wxml-->
 <text>pages/test/image.wxml</text>
+<view class="demobox">
+  <view class="title">1.缩放模式:scaleToFill不保持纵横比例缩放图片，使图片完全适应</view>
+  <image src='../../images/R-C.jpg' mode="scaleToFill"></image>
+  <view class="title">2.缩放模式:aspectFit保持纵横比例缩放图片，使长边能完全显示</view>
+  <image src='../../images/R-C.jpg' mode="aspectFit"></image>
+  <view class="title">3.缩放模式:aspectFill保持纵横比例缩放图片，只保证短边完全显示</view>
+  <image src='../../images/R-C.jpg' mode="aspectFill"></image>
+  <view class="title">4.缩放模式:widthFix宽度不变，高度变化，保持纵横比例</view>
+  <image src='../../images/R-C.jpg' mode="widthFix"></image>
+  <view class="title">5.裁剪模式:top不缩放图片，只显示图片的顶部区域</view>
+  <image src='../../images/R-C.jpg' mode="top"></image>
+</view>

pages/test/image.wxss

@@ -1 +1,5 @@
 /* pages/test/image.wxss */
+image{
+  width: 300rpx;
+  height: 300rpx;
+}

pages/test/vedio.wxml

@@ -1,2 +0,0 @@
-<!--pages/test/vedio.wxml-->
-<text>pages/test/vedio.wxml</text>

pages/test/video.js

@@ -0,0 +1,71 @@
+// pages/test/vedio.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        src:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
+        danmulist:[
+            {text:'第1s出现',color:'yellow',time:1},
+            {text:'第3s出现',color:'purple',time:3},
+            {text:'第7s出现',color:'red',time:7}
+        ]
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/video.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/video.wxml

@@ -0,0 +1,6 @@
+<!--pages/test/vedio.wxml-->
+<text>pages/test/vedio.wxml</text>
+<view class="demobox">
+  <view class="title">播放网络视频</view>
+  <video src="{{src}}" controls="true" autoplay="true" danmu-list="{{danmulist}}"></video>
+</view>

pages/test/video.wxss

@@ -0,0 +1 @@
+/* pages/test/vedio.wxss */

project.config.json

@@ -9,34 +9,42 @@
     ]
   },
   "setting": {
-    "bundle": false,
-    "userConfirmedBundleSwitch": false,
     "urlCheck": true,
-    "scopeDataCheck": false,
-    "coverView": true,
     "es6": true,
+    "enhance": true,
     "postcss": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
     "preloadBackgroundData": false,
     "minified": true,
-    "autoAudits": false,
     "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
     "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
     "uploadWithSourceMap": true,
-    "useIsolateContext": true,
+    "compileHotReLoad": false,
-    "nodeModules": false,
+    "lazyloadPlaceholderEnable": false,
-    "enhance": true,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
     "useApiHostProcess": true,
-    "showShadowRootInWxmlPanel": true,
+    "babelSetting": {
-    "packNpmManually": false,
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
     "enableEngineNative": false,
+    "useIsolateContext": true,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
+    "disableUseStrict": false,
+    "minifyWXML": true,
     "showES6CompileOption": false,
-    "minifyWXML": true
+    "useCompilerPlugins": false
   },
   "compileType": "miniprogram",
   "libVersion": "2.19.4",