My samples for mini program demo

miniprogram/app.json

@@ -29,6 +29,9 @@
     "page/component/pages/movable-view/movable-view",
     "page/component/pages/cover-view/cover-view",
     "page/component/pages/rich-text/rich-text",
+    "page/component/pages/live-player/live-player",
+    "page/component/pages/live-pusher/live-pusher",
+    "page/component/pages/official-account/official-account",
     "page/API/index",
     "page/API/pages/login/login",
     "page/API/pages/get-user-info/get-user-info",

miniprogram/page/component/index.js

@@ -35,7 +35,7 @@ Page({
         id: 'media',
         name: '媒体组件',
         open: false,
-        pages: ['image', 'audio', 'video', 'camera']
+        pages: ['image', 'audio', 'video', 'camera', 'live-pusher', 'live-player']
       }, {
         id: 'map',
         name: '地图',
@@ -50,7 +50,7 @@ Page({
         id: 'open',
         name: '开放能力',
         open: false,
-        pages: ['ad', 'open-data', 'web-view']
+        pages: ['ad', 'open-data', 'web-view', 'official-account']
       }
     ]
   },

miniprogram/page/component/pages/button/button.js

@@ -32,6 +32,26 @@ const pageObject = {
     this.setData({
       loading: !this.data.loading
     })
+  },
+
+  handleContact(e) {
+    console.log(e.detail)
+  },
+
+  handleGetPhoneNumber(e) {
+    console.log(e.detail)
+  },
+
+  handleGetUserInfo(e) {
+    console.log(e.detail)
+  },
+
+  handleOpenSetting(e) {
+    console.log(e.detail.authSetting)
+  },
+
+  handleGetUserInfo(e) {
+    console.log(e.detail.userInfo)
   }
 }
 

miniprogram/page/component/pages/button/button.wxml

@@ -27,6 +27,13 @@
         <button class="mini-btn" type="default" size="mini">按钮</button>
         <button class="mini-btn" type="warn" size="mini">按钮</button>
       </view>
+
+      <button type="primary" open-type="contact" bindcontact="handleContact" show-message-card="{{true}}" send-message-title="临时会话">打开客服会话</button>
+      <button type="primary" open-type="share">触发用户转发</button>
+      <button type="primary" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取用户手机号</button>
+      <button type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
+      <button type="primary" open-type="openSetting" bindopensetting="handleOpenSetting">打开设置授权页</button>
+      <button type="primary" open-type="feedback">打开意见反馈</button>
     </view>
   </view>
 

miniprogram/page/component/pages/camera/camera.js

@@ -11,10 +11,24 @@ Page({
     videoSrc: '',
     position: 'back',
     mode: 'scanCode',
-    result: {}
+    result: {},
+    frameWidth: 0,
+    frameHeight: 0
   },
   onLoad() {
     this.ctx = wx.createCameraContext()
+    const listener = this.ctx.onCameraFrame((frame) => {
+      const { frameWidth, frameHeight } = this.data;
+
+      // you can print buffer data by executing codes below:
+      // console.log(frame.data)
+      if (frameWidth === frame.width && frameHeight == frame.height) return;
+      this.setData({
+        frameWidth: frame.width,
+        frameHeight: frame.height
+      })
+    })
+    listener.start()
   },
   takePhoto() {
     this.ctx.takePhoto({

miniprogram/page/component/pages/camera/camera.wxml

@@ -12,6 +12,23 @@
         binderror="error"
       >
       </camera>
+      <view class="page-section">
+          <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_switch">
+              <view class="weui-cell__bd">帧高度</view>
+              <view class="weui-cell__ft">
+                {{ frameHeight }}
+              </view>
+            </view>
+            <view class="weui-cell weui-cell_switch">
+              <view class="weui-cell__bd">帧宽度</view>
+              <view class="weui-cell__ft">
+                {{ frameWidth }}
+              </view>
+            </view>
+        </view>
+      </view>
+
       <view class="btn-area first-btn">
       <button type="primary" bindtap="togglePosition">切换摄像头</button>
       </view>

miniprogram/page/component/pages/editor/editor.js

@@ -3,81 +3,86 @@ const util = require('../../../../util/util.js')
 const compareVersion = util.compareVersion
 
 Page({
-  onShareAppMessage() {
-    return {
-      title: 'editor',
-      path: 'page/component/pages/editor/editor'
-    }
-  },
-
   data: {
     formats: {},
-    bottom: 0,
     readOnly: false,
     placeholder: '开始输入...',
+    editorHeight: 300,
+    keyboardHeight: 0,
+    isIOS: false
   },
   readOnlyChange() {
     this.setData({
       readOnly: !this.data.readOnly
     })
   },
   onLoad() {
-    this.canUse = true
-    wx.loadFontFace({
-      family: 'Pacifico',
-      source: 'url("https://sungd.github.io/Pacifico.ttf")',
-      success: console.log
-    })
-    const {SDKVersion} = wx.getSystemInfoSync()
+    const platform = wx.getSystemInfoSync().platform
+    const isIOS = platform === 'ios'
+    this.setData({ isIOS })
+    const that = this
+    this.updatePosition(0)
+    let keyboardHeight = 0
+    wx.onKeyboardHeightChange(res => {
+      if (res.height === keyboardHeight) return
+      const duration = res.height > 0 ? res.duration * 1000 : 0
+      keyboardHeight = res.height
+      setTimeout(() => {
+        wx.pageScrollTo({
+          scrollTop: 0,
+          success() {
+            that.updatePosition(keyboardHeight)
+            that.editorCtx.scrollIntoView()
+          }
+        })
+      }, duration)
 
-    if (compareVersion(SDKVersion, '2.7.0') >= 0) {
-      //
-    } else {
-      this.canUse = false
-      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
-      wx.showModal({
-        title: '提示',
-        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
-      })
-    }
+    })
+  },
+  updatePosition(keyboardHeight) {
+    const toolbarHeight = 50
+    const { windowHeight, platform } = wx.getSystemInfoSync()
+    let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
+    this.setData({ editorHeight, keyboardHeight })
+  },
+  calNavigationBarAndStatusBar() {
+    const systemInfo = wx.getSystemInfoSync()
+    const { statusBarHeight, platform } = systemInfo
+    const isIOS = platform === 'ios'
+    const navigationBarHeight = isIOS ? 44 : 48
+    return statusBarHeight + navigationBarHeight
   },
-
   onEditorReady() {
     const that = this
     wx.createSelectorQuery().select('#editor').context(function (res) {
       that.editorCtx = res.context
     }).exec()
   },
-
-  undo() {
-    this.editorCtx.undo()
-  },
-  redo() {
-    this.editorCtx.redo()
+  blur() {
+    this.editorCtx.blur()
   },
   format(e) {
-    if (!this.canUse) return
-    const {name, value} = e.target.dataset
+    let { name, value } = e.target.dataset
     if (!name) return
     // console.log('format', name, value)
     this.editorCtx.format(name, value)
-  },
 
+  },
   onStatusChange(e) {
     const formats = e.detail
-    this.setData({formats})
+    this.setData({ formats })
   },
   insertDivider() {
     this.editorCtx.insertDivider({
-      success() {
+      success: function () {
         console.log('insert divider success')
       }
     })
   },
   clear() {
     this.editorCtx.clear({
-      success() {
-        console.log('clear success')
+      success: function (res) {
+        console.log("clear success")
       }
     })
   },
@@ -95,14 +100,15 @@ Page({
     const that = this
     wx.chooseImage({
       count: 1,
-      success() {
+      success: function (res) {
         that.editorCtx.insertImage({
-          src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543767268337&di=5a3bbfaeb30149b2afd33a3c7aaa4ead&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20151031%2Ftooopen_sy_147004931368.jpg',
+          src: res.tempFilePaths[0],
           data: {
             id: 'abcd',
             role: 'god'
           },
-          success() {
+          width: '80%',
+          success: function () {
             console.log('insert image success')
           }
         })

miniprogram/page/component/pages/editor/editor.wxml

@@ -5,52 +5,22 @@
   <!-- <template is="head" data="{{title: 'editor'}}"/> -->
   <view class="page-body">
     <view class='wrapper'>
-      <view class='toolbar' bindtap="format">
+      <view class="container" style="height:{{editorHeight}}px;">
+        <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady">
+        </editor>
+      </view>
+
+      <view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
+        <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
+        <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
+        <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
         <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
         <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
         <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
-        <i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i>
-        <i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i>
-        <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
-        <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>
-        <i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify"></i>
-        <i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight" data-value="2"></i>
-        <i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}" data-name="letterSpacing" data-value="2em"></i>
-        <i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop" data-value="20px"></i>
-        <i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}" data-name="marginBottom" data-value="20px"></i>
-        <i class="iconfont icon-clearedformat" bindtap="removeFormat"></i>
-        <i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily" data-value="Pacifico"></i>
-        <i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i>
-
-        <i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i>
-        <i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#00ff00"></i>
-
-        <i class="iconfont icon-date" bindtap="insertDate"></i>
         <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
         <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
         <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
-        <i class="iconfont icon-undo" bindtap="undo"></i>
-        <i class="iconfont icon-redo" bindtap="redo"></i>
-
-        <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
-        <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
-        <i class="iconfont icon-fengexian" bindtap="insertDivider"></i>
-        <i class="iconfont icon-charutupian" bindtap="insertImage"></i>
-        <i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}"></i>
-        <i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i>
-        <i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i>
-        <!-- <i class="iconfont icon-quanping"></i> -->
-        <i class="iconfont icon-shanchu" bindtap="clear"></i>
-        <i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction" data-value="rtl"></i>
-
       </view>
-
-      <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange"  read-only="{{readOnly}}" bindready="onEditorReady">
-      </editor>
-
-      <!-- <view>
-        <button bindtap="readOnlyChange">{{readOnly ? '可写':'只读'}}</button>
-      </view> -->
     </view>
   </view>