文章目录

• 一、常用的组件地图之-map
• 1.marker
• • 1.1 marker
  • 1.2 marker 上的气泡 callout
• 2.control
• 二、小程序的定位相关api
• 三、获取设备的基本信息的api
• • 1、设置全局的变量 app.js
  • 2.获取设备信息 app.js
  • 3.地图页面获取全局的设备信息
• 四、处理小程序中的html标签
• • 1.rich-text
  • 2.wxparse https://github.com/icindy/wxParse
• 五、小程序中的模板语法
• 六、小程序常用api之拍照
• • 1.预览图片
  • 2.拍照
• 七、wx.showActionSheet

一、常用的组件地图之-map

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

1.marker

1.1 marker

标记点用于在地图上显示标记的位置

1.2 marker 上的气泡 callout

2.control

在地图上显示控件，控件不随着地图移动

二、小程序的定位相关api

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.stopLocationUpdate.html

三、获取设备的基本信息的api

https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html

• 同步

  try {

  // 如果条件可以执行下去
  const res = wx.getSystemInfoSync()
  console.log(res)

  } catch () {

  // 异常

  }

• 异步

  wx.getSystemInfo({

  success: (res) => { }

  })

因为设备的信息可能在多个地方使用，所以建议使用全局变量

1、设置全局的变量 app.js

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

2.获取设备信息 app.js

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

3.地图页面获取全局的设备信息

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

四、处理小程序中的html标签

1.rich-text

http://ueditor.baidu.com/website/

https://www.cnblogs.com/sky903700252/p/7846240.html

var data = `<p><span style="font-size: 24px;"><strong><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">在奥运资格赛第三阶段结束后</span></strong></span><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">，国际篮联公布了世界最新排名。有趣的是，以三连胜战绩晋级东京奥运会的女篮排名竟然从第8名下滑到
了第9名！不过这并不影响仍然力压，<span style="font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">比利时队成为了最大的赢家</span></span></strong><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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>

2.wxparse https://github.com/icindy/wxParse

第一步下载wxParse，参考网盘链接
链接：https://pan.baidu.com/s/1bMvyar60I1BAqzr5qxHZXw
提取码：gv9w

第二步 复制文件夹wxParse至项目跟目录下

第三步 详情页面引入必要的文件

// pages/detail/detail.js
var WxParse = require('../../wxParse/wxParse.js');
// pages/detail/detail.wxss
@import "/wxParse/wxParse.wxss";

第四步 数据绑定

当数据请求成功之后，会得到一段HTML代码，形如

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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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.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);

模版引用 pages/detail/detail.wxml

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

js修改窗口
https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html

五、小程序中的模板语法

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

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

使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如

wxml
<template is="msgItem" data="{ {...item}}"/>
// js
Page({ 
  data: { 
    item: { 
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

六、小程序常用api之拍照

1.预览图片

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

// 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
   })
 }

2.拍照

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照

object.sizeType 的合法值

object.sourceType 的合法值

object.success 回调函数

res.tempFiles 的结构

<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})
      }
    })
  }
})

七、wx.showActionSheet

显示操作菜单

// 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('你点击去了取消按钮')
      }
    })
  }