微信小程序常用组件

try {
    // 如果条件可以执行下去
    const res = wx.getSystemInfoSync()
    console.log(res)
} catch () {
    // 异常
}

 wx.getSystemInfo({
    success: (res) => {}
 })

globalData: {
    userInfo: null,
    deviceinfo: null
},

App({
    onLaunch () {
        // 获取设备的信息
        this.getDeviceInfoFn()
        
    },
    getDeviceInfoFn () {
        wx.getSystemInfo({
          success: (res) => {
            console.log(res)
            // 修改全局数据
            this.globalData.deviceinfo = res
          }
        })
    }
})

// pages/map/map.js
const app = getApp();
console.log(app.globalData)
// const { screenWidth, screenHeight } = app.globalData.deviceinfo
const { globalData: { deviceinfo: { screenWidth, screenHeight }}} = app

var data = `<p><span style="font-size: 24px;"><strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">在奥运资格赛第三阶段结束后</span></strong></span><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">，国际篮联公布了世界最新排名。有趣的是，以三连胜战绩晋级东京奥运会的女篮排名竟然从第8名下滑到
了第9名！不过这并不影响仍然力压，<span style="font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"><em>居于亚洲排名的首位</em></span>。</span></p><p></p><p><strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">比利时队成为了最大的赢家</span></span></strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">，她们从
第9位连升两位，跃居至第7位，除了塞尔维亚和比利时外，世界排名前6名的位次和原先保持不变。现世界排名前10的球队分别是：1.美国、2.澳大利亚、3.西班牙、4.加拿大、5.法国、6.土耳其、7.比利时、8.塞尔维亚。</span></span></p><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><br/></span></span></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p><span style="color:
rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">111</span></span></p></li><li><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">2222</span></span></p></li><li><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">33333<br/></span></span></p></li></ul>`;
    // 修改状态
    this.setData({
      proid, // 不需要从 响应数据中拿取，但是可以从那拿（可以拿，但不需要）
      proname,
      proimg,
      detail: data,
      price
    })

// pages/detail/detail.wxml
<rich-text nodes="{{detail}}" ></rich-text>

// pages/detail/detail.js
var WxParse = require('../../wxParse/wxParse.js');

// pages/detail/detail.wxss
@import "/wxParse/wxParse.wxss";

var detail = `<p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>指出</strong></span>，总理先生是人民的老朋友，在当前人民奋力抗击新冠肺炎疫情的关键时刻，先生提出同我通电话，
体现了方对方的情谊和支持。疫情难免暂时影响正常人员往来，但动摇不了人民的深厚友谊。双方要在携手应对疫情挑战的同时，持续深化两国
关系特别是共建“<span style="color: rgb(255, 0, 0); text-decoration: underline;">一带一路</span>”合作，创造更多合作成果，造福两国和两国人民。<
/p><p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;,
&quot;Helvetica Neue&quot;, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>强调</strong></span>，疫情发生以来，政府高度重视，举全国之力，团结一心，采取最全面、最严格、最彻底的防控举措，取得积极成效，病亡率保持在较低水平，治疗方法不断突破，治愈率持续提升。中国政府将带领中国人民坚定信心、同舟共济、科学防治、精准施策，坚决打赢疫情防控阻击战。我们也
一定能把疫情影响降到最低，保持中国经济发展势头，努力实现今年<span style="color: rgb(255, 0, 0);"><em>发展目标任务</em></span>，同时继续朝我们的长远目标坚定迈进。</p><p><br/></p>`

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
WxParse.wxParse('article', 'html', data, this, 5);

<import src="/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

wxml
<template is="msgItem" data="{{...item}}"/>

// js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

// pages/home/home.wxml
 <image lazy-load="{{true}}" mode="widthFix" show-menu-by-longpress="{{true}}" src="{{'http://daxun.kuboy.top' + item}}" data-index="index" bindtap="previewImage"></image>

// pages/home/home.js
previewImage (event) {
   let arr = []; // 预留空数组
   let index = event.currentTarget.dataset.index // 获取当前点击的图片的索引
   this.data.bannerlist.map(item => { // 将处理的数据压入数组
    arr.push('http://daxun.kuboy.top' + item)
   })
   console.log(arr)
   wx.previewImage({ // 调用预览图片
     current: arr[index],
     urls: arr
   })
 }

<button bindtap="chooseImg">拍照</button>
<image wx:for="{{img}}" src="{{item}}"></image>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    img:""
  },

  //拍照
  chooseImg(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:(res)=>{
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        this.setData({img:tempFilePaths})
      }
    })
  }
})

// pages/user/user.wxml
<button bindtap="showActionSheet">操作表</button>

// pages/user/user.js
/**
   * 打开操作表  模拟真机的拍照
   */
  showActionSheet () {
    wx.showActionSheet({
      itemList: ['拍照', '从手机相册选取'],
      success(res) {
        console.log(res.tapIndex)
        switch (res.tapIndex) {
          case 0: 
            console.log('调用拍照')
            break;
          case 1:
            console.log('从手机相册选取')
            break;
          default: 
            console.log('选择了其中一个')
        }
      },
      fail () {
        console.log('你点击去了取消按钮')
      }
    })
  }