2021-12-21

app.json

@@ -15,7 +15,16 @@
         "pages/test/checkbox",
         "pages/test/input",
         "pages/test/form",
-    "pages/test/picker"
+        "pages/test/picker",
+        "pages/test/picker-view",
+        "pages/test/radio",
+        "pages/test/slider",
+        "pages/test/switch",
+        "pages/test/textarea",
+        "pages/test/audio",
+        "pages/test/image",
+        "pages/test/vedio",
+        "pages/test/camera"
     ],
     "window": {
         "backgroundTextStyle": "light",

pages/index/index.js

@@ -31,7 +31,21 @@ Page({
           {title:'checkbox组件',url: "../test/checkbox"},
           {title:'input组件',url: "../test/input"},
           {title:'form组件',url: "../test/form"},
-          {title:'picker组件',url: "../test/picker"}
+          {title:'picker组件',url: "../test/picker"},
+          {title:'picker-view组件',url: "../test/picker-view"},
+          {title:'radio组件',url: "../test/radio"},
+          {title:'slider组件',url: "../test/slider"},
+          {title:'switch组件',url: "../test/switch"},
+          {title:'textarea组件',url: "../test/textarea"}
+        ]
+      },
+      {
+        type:'媒体组件',
+        pages:[
+          {title:'audio组件',url: "../test/audio"},
+          {title:'image组件',url: "../test/image"},
+          {title:'vedio组件',url: "../test/vedio"},
+          {title:'camera组件',url: "../test/camera"}
         ]
       }
     ],

pages/test/audio.js

@@ -0,0 +1,70 @@
+// pages/test/audio.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        poster:'https://img.1ting.com/images/special/15/s300_2e0d202a2f39d3431d53053dac7f49c0.jpg',
+        name:'朋友',
+        author:'周华健',
+        src:'https://www.1ting.com/api/audio?/2021/12/08/08b_zd/01.mp3'
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        const audioCtx=wx.createInnerAudioContext();
+        audioCtx.src='https://mp3.haoge500.com/upload/320/2021/11/11/1234749.mp3';
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/audio.json

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

pages/test/audio.wxml

@@ -0,0 +1,6 @@
+<!--pages/test/audio.wxml-->
+<text>pages/test/audio.wxml</text>
+<view class="demobox">
+    <view class="title">播放网络音频</view>
+    <audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls="true" loop="true"></audio>
+</view>

pages/test/audio.wxss

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

pages/test/camera.js

@@ -0,0 +1,66 @@
+// pages/test/camera.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/camera.json

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

pages/test/camera.wxml

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

pages/test/camera.wxss

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

pages/test/image.js

@@ -0,0 +1,66 @@
+// pages/test/image.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/image.json

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

pages/test/image.wxml

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

pages/test/image.wxss

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

pages/test/picker-view.js

@@ -0,0 +1,78 @@
+// pages/test/picker-view.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        soup:["奶油蘑菇汤",'罗宋汤','牛肉清汤'],
+        maincourse:['煎小牛肉卷','传统烤羊排','清煮三文鱼'],
+        dessert:['坚果冰淇淋','焦糖布丁','奶酪蛋糕'],
+        value:[1,1,1],
+        menu:[]
+    },
+    pickerviewChange:function(e){
+        let v=e.detail.value;
+        let menu=[];
+        menu.push(this.data.soup[v[0]]);
+        menu.push(this.data.maincourse[v[1]]);
+        menu.push(this.data.dessert[v[2]]);
+        this.setData({menu:menu});
+
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/picker-view.json

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

pages/test/picker-view.wxml

@@ -0,0 +1,17 @@
+<!--pages/test/picker-view.wxml-->
+<text>pages/test/picker-view.wxml</text>
+<view class="demobox">
+    <view class="title">今日菜单</view>
+    <view>{{menu}}</view>
+    <picker-view value="{{value}}" indicator-style="height:50px;" bindchange="pickerviewChange">
+        <picker-view-column>
+            <view class="col" wx:for="{{soup}}" wx:key="s{{index}}">{{item}}</view>
+        </picker-view-column>
+        <picker-view-column>
+            <view class="col" wx:for="{{maincourse}}" wx:key="m{{index}}">{{item}}</view>
+        </picker-view-column>
+        <picker-view-column>
+            <view class="col" wx:for="{{dessert}}" wx:key="d{{index}}">{{item}}</view>
+        </picker-view-column>
+    </picker-view>
+</view>

pages/test/picker-view.wxss

@@ -0,0 +1,8 @@
+/* pages/test/picker-view.wxss */
+picker-view{
+    width: 100%;
+    height: 300px;
+}
+.col{
+    line-height: 50px;
+}

pages/test/radio.js

@@ -0,0 +1,73 @@
+// pages/test/radio.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        radioitems:[
+            {name:'苹果',value:'Apple'},
+            {name:'梨子',value:'Pear'},
+            {name:'橙子',value:'Orange',checked:'true'}
+        ]
+    },
+    radiochange:function(e){
+        console.log(e.detail.value);
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/radio.json

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

pages/test/radio.wxml

@@ -0,0 +1,10 @@
+<!--pages/test/radio.wxml-->
+<text>pages/test/radio.wxml</text>
+<view class="demobox">
+    <view class="title">使用数组批量生成选项</view>
+    <radio-group bindchange="radiochange">
+        <view class="test" wx:for="{{radioitems}}" wx:key="index">
+            <radio value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</radio>
+        </view>
+    </radio-group>
+</view>

pages/test/radio.wxss

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

pages/test/slider.js

@@ -0,0 +1,69 @@
+// pages/test/slider.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+    sliderchange:function(e){
+        console.log(e.detail.value);
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/slider.json

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

pages/test/slider.wxml

@@ -0,0 +1,12 @@
+<!--pages/test/slider.wxml-->
+<text>pages/test/slider.wxml</text>
+<view class="demobox">
+    <view class="title">1.滚动条右侧显示当前取值</view>
+    <slider min="0" max="100" value="50" step="5" show-value="true"/>
+    <view class="title">2.自定义滑动条颜色和滑块样式</view>
+    <slider min="0" max="100" value="50" step="5" block-size="20" block-color="red" activeColor="red"/>
+    <view class="title">3.禁用滑动条</view>
+    <slider min="0" max="100" value="50" step="5" disabled="true"/>
+    <view class="title">4.滑动条事件监听</view>
+    <slider min="0" max="100" value="50" step="5" bindchange="sliderchange"/>
+</view>

pages/test/slider.wxss

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

pages/test/switch.js

@@ -0,0 +1,68 @@
+// pages/test/switch.js
+Page({
+    switchchange:function(e){
+        console.log(e.detail.value);
+    },
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/switch.json

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

pages/test/switch.wxml

@@ -0,0 +1,6 @@
+<!--pages/test/switch.wxml-->
+<text>pages/test/switch.wxml</text>
+<view class="demobox">
+    <view class="title">switch事件监听</view>
+    <switch bindchange="switchchange" checked="true"/>
+</view>

pages/test/switch.wxss

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

pages/test/textarea.js

@@ -0,0 +1,66 @@
+// pages/test/textarea.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/textarea.json

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

pages/test/textarea.wxml

@@ -0,0 +1,10 @@
+<!--pages/test/textarea.wxml-->
+<text>pages/test/textarea.wxml</text>
+<view class="demobox">
+    <view class="title">1.自动变高</view>
+    <textarea auto-height="true" placeholder="默认一行，但可以自动变高"/>
+    <view class="title">2.自定义占位符颜色</view>
+    <textarea placeholder="playceholder颜色是红色" placeholder-style="color:red;"/>
+    <view class="title">3.禁用状态</view>
+    <textarea placeholder="该文本框已被禁用" disabled="true"/>
+</view>

pages/test/textarea.wxss

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

pages/test/vedio.js

@@ -0,0 +1,66 @@
+// pages/test/vedio.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/test/vedio.json

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

pages/test/vedio.wxml

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

pages/test/vedio.wxss

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