search

WangShuXian6 / blog

FE-BLOG
https://wangshuxian6.github.io/blog/
MIT License
45 stars 10 forks source link

微信小程序 #16

Open WangShuXian6 opened 6 years ago

WangShuXian6 commented 6 years ago

懒加载

```javascript
<view wx:for="{{list}}" class='item item-{{index}}'
 wx:key="{{index}}">
    <image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image>
</view>
image{
    transition: all .3s ease;
    opacity: 0;
}
.active{
    opacity: 1;
}

小程序支持调用createSelectQuery创建一个SelectorQuery实例，并使用select方法来选择节点，并通过boundingClientRect来获取节点信息。

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
console.log(ret)
}).exec()

小程序里面有个onPageScroll函数，是用来监听页面的滚动的。 还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度


showImg(){
let group = this.data.group
let height = this.data.height  // 页面的可视高度
wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {
 ret.forEach((item, index) => {
   if (item.top <= height) { 判断是否在显示范围内
     group[index].show = true // 根据下标改变状态
   }
 })
 this.setData({
   group
 })
}).exec()

} onPageScroll(){ // 滚动事件 this.showImg() }


<hr>

>官方图片懒加载
WangShuXian6 commented 6 years ago

小程序事件传多个变量参数的方式 参数以数组形式接受

<view @tap="addToCart({{is_set_meal}},{{id}})" class="add">+</view>
addToCart(payload){
console.log(paylaod)
// [1, 10, _class]
}
WangShuXian6 commented 6 years ago

WXML节点布局相交状态 https://developers.weixin.qq.com/miniprogram/dev/api/intersection-observer.html#intersectionobserverobservetargetselectorcallback 将可视区域的下边界减少500，上边界减少0

scrollObserver() {
if (this.order.length > 0) {
this.order.forEach((item, index, array) => {
wx.createIntersectionObserver().relativeToViewport({top:0,bottom:-500}).observe(`#${item.scrollId}`, (res) => {
if(this.scroll.scrollObserveToggle){
console.log('res',res)
console.log('限制后的显示区域',item.navId)
this.methods.updateScroll({
scrollIntoViewId:'',
activateNavgationId:item.navId
})
}
})
})
}
}
WangShuXian6 commented 6 years ago

将默认的方形用户头像变为圆形

<open-data type="userAvatarUrl" class="user"></open-data>

 <open-data type="userNickName"></open-data>
.user{
          display: flex;
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          overflow: hidden;
        }

avatar-1


<view class="top">
  <open-data type="userAvatarUrl" class="user-avatar"></open-data>
  <open-data type="userNickName" class="name"></open-data>

```less
@white: #fff;
@mainSize: 28rpx;
@mainColor: #303133;

& > .top {
      display: flex;
      align-items: center;
      width: 100%;
      height: 200rpx;
      background-color: @white;
      & > .user-avatar {
        display: flex;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 20rpx;
        margin-right: 20rpx;
      }
      & > .name {
        font-size: @mainSize;
        color: @mainColor;
      }
    }
WangShuXian6 commented 6 years ago

小程序API注意事项

navigateToMiniProgram:fail 此接口已废弃， 请使用 <navigator target="miniProgram" open-type="navigateTo" /> 组件

领卡


onShow(options){
let info = options.query
info.scene = options.scene
ENV === 'development' && console.log('模版消息参数',info)
ENV === 'development' && console.log('APP--options',options)
// 更新扫码获取的桌台及门店id
this.globalData.data = info
this.checkHaveActiveMember(options)
}
checkHaveActiveMember(options){
  if(options.referrerInfo.appId==='wxeb490c6f9b154ef9'){
    ENV === 'development' && console.log('通过开卡小程序组件返回',options.referrerInfo.appId)
    ENV === 'development' && console.log('通过开卡小程序组件返回--options.referrerInfo.extraData',options.referrerInfo.extraData)
    if(options.referrerInfo.extraData){
      ENV === 'development' && console.log('通过开卡小程序组件返回-并且点击了 立即开卡 成为会员--',options.referrerInfo.appId)
      this.globalData.haveActiveMember=true
      this.globalData.extraData=options.referrerInfo.extraData
    }
  }
}
> 强制刷新缓存页面
```javascript
async onShow(){
  this.onLoad()
}

网络请求 method: 需大写-有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

注意：没有PATCH


wx.request(OBJECT)

<hr>

>获取用户信息方案介绍 [官方](https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&docid=c45683ebfa39ce8fe71def0631fad26b)

<hr/>

>对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行

<hr/>
WangShuXian6 commented 6 years ago

小程序UI组件库

MinUI

Min 结合 Wepy

安装 Min

$ sudo npm install -g @mindev/min-cli

min -v 命令查看 min 的版本号

安装 MinUI 组件

新建 min.config.json配置文件 Min 的执行依赖于配置文件，在项目的根目录下新建 min.config.json 文件。由于 wepy 要求在微信开发者工具中关闭 es6=>es5 功能，因此在 min.config.json 中需配置 babel，用于在 min 编译组件之后生成 es5 代码。babel 的配置如下所示：

{
"compilers": {
"babel": {
"sourceMaps": "inline",
"presets": [
"env"
],
"plugins": [
"syntax-export-extensions",
"transform-class-properties",
"transform-decorators-legacy",
"transform-export-extensions"
]
}
}
}

安装 wxc-toast 组件

$ min install @minui/wxc-toast
// npm install @minui/wxc-progress --save

在 wpy 文件中使用 wxc-toast 在 config 字段中配置 usingComponents 字段，wxc-toast 组件的路径是 dist 目录下 pages/index/index.js 相对于 wxc-toast 组件的路径。


<!-- index.wpy -->
<style lang="less">
</style>
<template>
<view class="container">
<wxc-toast
class="J_toast"
text="Hello World"></wxc-toast>
<button bindtap="showToast">调用 show() 方法显示</button>
</view>
</template>

>该示例中，调用了 wxc-toast 组件的 show() 方法。值得注意的是，我们不能直接用 this.selectComponent 来获取 toast 的实例，因为 wepy 的 Page 是内部封装过的，没有 selectComponent 方法，用 this.$wxpage 可获取页面的真实 Page 对象实例，该实例中有selectComponent方法。对于暴露出组件方法的一些组件，比如 loading, dialog等组件，在 wepy 中都应通过这种方法来获取组件实例。
WangShuXian6 commented 6 years ago

小程序原生使用第三方库

小程序原生使用ES7 async / await 语法

小程序开发工具-详情-开启ES6转ES5 下载 regenerator 库 https://github.com/facebook/regenerator 将库中packages文件夹下 regenerator-runtime 文件夹全部复制到小程序项目中 小程序项目全局引入 regenerator 库 在app.js中引入

const regeneratorRuntime = require('./libs/runtime-module.js')

使用方法


Page({

/**

WangShuXian6 commented 6 years ago

小程序生命周期

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})
WangShuXian6 commented 6 years ago

小程序参数传递

事件

事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻辑层进行处理 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数 事件对象可以携带额外信息，如id, dataset, touches

页面路由传递参数

index.js 发出参数

onLoad() {
wx.navigateTo({
url: '../async/async?paramA=666'
})
},

async.js 接收参数

onLoad(options) {
console.log('接受的路由参数---paramA---',options.paramA)
//  接受的路由参数---paramA--- 666
}

wxml中配置data-testid传递字符串 https://www.jianshu.com/p/a3481a255842 注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

<view bindtap="clickMe" data-testId={{testId}}">
...
</view>
Page({
clickMe: function(event) {
var testId = event.currentTarget.dataset.testid;
wx.navigateTo({
url: '../../pages/test/test'
})
}
})

e.currentTarget.dataset.id

WangShuXian6 commented 6 years ago

小程序打包上传的时候设置忽略某个文件夹

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html 可以在项目根目录使用 project.config.json 文件对项目进行配置 修改packOptions值 project.config.json 忽略全部图片

{
"description": "项目配置文件。",
"packOptions": {
"ignore": [{
"type": "suffix", // 忽略属性为后缀名
"value": ".jpg" // 忽略值为.jpg
}]
}
}

packOptions 用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。 目前可以指定 packOptions.ignore 字段，用以配置打包时对符合指定规则的文件或文件夹进行忽略，以跳过打包的过程，这些文件或文件夹将不会出现在预览或上传的结果内。

WangShuXian6 commented 6 years ago

小程序自定义组件

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

官方 slide-view 公共组件 (npm包)

https://github.com/wechat-miniprogram/slide-view 安装 slide-view

npm install --save miniprogram-slide-view

在需要使用 slide-view 的页面 page.json 中添加 slide-view 自定义组件配置

{
"usingComponents": {
"slide-view": "miniprogram-slide-view"
}
}

WXML 文件中引用 slide-view

<slide-view class="slide" width="320" height="100" slideWidth="200">
<view slot="left">这里是插入到组内容</view>
<view slot="right">
<view>标为已读</view>
<view>删除</view>
</view>
</slide-view>

使用 npm 包 在小程序中执行命令安装 npm 包

PS：此处请务必使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。 PS：原则上并没有强制要求 node_modules 必须在小程序根目录中，也可以存在于小程序的各个子目录中。

npm install --production

点击开发者工具中的菜单栏：工具 --> 构建 npm 开发工具-详情-勾选“使用 npm 模块”选项 构建完成后即可使用 npm 包

小程序私有内部组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 项目目录格式 component

components组件样式 以下文件在components目录下 my-component.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
</view>
<slot></slot>

my-component.wxss 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

/* components/my-component.wxss */

my-component.json 需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）

{
"component": true,
"usingComponents": {}
}

my-component.js

Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function () { }
}
})

使用组件 index目录文件 index.wxml

<view>
<!-- 以下是对一个自定义组件的引用 -->
<my-component inner-text="Some text"></my-component>
</view>

index.wxss

.intro {
margin: 30px;
text-align: center;
}

index.json

{
"usingComponents": {
"my-component": "/components/my-component"
}
}

index.js


const app = getApp()

Page({ data: {

}, onLoad: function () { console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：') console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html') }, })



<hr/>
WangShuXian6 commented 6 years ago

小程序抽象组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html

示例源码 anstract

配置页面路径 ./app.json

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/abstractCom/abstractCom",
"pages/com1/com1",
"pages/com2/com2"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

声明抽象组件 abstractCom

./pages/abstractCom/abstractCom.json

{
"component": true,
"componentGenerics": {
"abstract": true
},
"usingComponents": {}
}

./pages/abstractCom/abstractCom.wxml

<!--pages/abstractCom/abstractCom.wxml-->
<abstract></abstract>

./pages/abstractCom/abstractCom.wxss

/* pages/abstractCom/abstractCom.wxss */

./pages/abstractCom/abstractCom.js


// pages/abstractCom/abstractCom.js
// 抽象组件
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**

声明抽象组件会用到的实例子组件,动态组件com1

./pages/com1/com1.json

{
"component": true,
"usingComponents": {}
}

./pages/com1/com1.wxml

<!--pages/com1/com1.wxml-->
<text>这是动态组件1pages/com1/com1.wxml</text>

./pages/com1/com1.wxss

/* pages/com1/com1.wxss */

./pages/com1/com1.js


// pages/com1/com1.js
// 抽象组件所需自组件1
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**

声明抽象组件会用到的实例子组件,动态组件com2

./pages/com2/com2.json

{
"component": true,
"usingComponents": {}
}

./pages/com2/com2.wxml

<!--pages/com2/com2.wxml-->
<text>这是动态组件1pages/com1/com1.wxml</text>

./pages/com2/com2.wxss

/* pages/com2/com2.wxss */

./pages/com2/com2.js


// pages/com2/com2.js
// 抽象组件所需自组件2
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**

声明使用抽象组件的主页面

./pages/index/index.json

{
"usingComponents": {
"abstract-com": "../abstractCom/abstractCom",
"com1": "../com1/com1",
"com2": "../com2/com2"
}
}

./pages/index/index.wxml

<!--index.wxml-->
<view class="container">
<abstract-com generic:abstract="com1"></abstract-com>
<abstract-com generic:abstract="com2"></abstract-com>
</view>

./pages/index/index.wxss

/**index.wxss**/

./pages/index/index.js


//index.js
//获取应用实例
const app = getApp()

Page({ data: {

}, onLoad: function () { } })


<hr/>

#### 抽象节点的默认组件
>抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定：
>>声明抽象组件 abstractCom
>>./pages/abstractCom/abstractCom.json
```JSON
{
  "component": true,
  "componentGenerics": {
    "abstract": {
      "default": "../com1/com1"
    }
  },
  "usingComponents": {}
}

./pages/index/index.wxml

<!--index.wxml-->
<view class="container">
<abstract-com generic:abstract="com1"></abstract-com>
<abstract-com generic:abstract="com2"></abstract-com>
<abstract-com></abstract-com>
</view>
WangShuXian6 commented 6 years ago

Behavior

定义Behavior my-behavior.js

// my-behavior.js
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String
}
},
data: {
myBehaviorData: {}
},
attached: function () { },
methods: {
myBehaviorMethod: function () {
console.log('log from my-behavior.js')
}
}
})

使用Behavior component-tag-name.js

// components/component-tag-name.js
var myBehavior = require('my-behavior')
Component({
behaviors: [myBehavior],
properties: {
myProperty: {
type: String
}
},
data: {
myData: {}
},
attached: function () { },
methods: {
myMethod: function () { },
}
})
WangShuXian6 commented 6 years ago

小程序 canvas

arc 圆形

circle.wxml

<!--components/circle/circle.wxml-->
<view class="container">
<canvas class="canvas" canvas-id="myCanvas" width="50" height="50"/>
</view>

circle.wxss


@import (reference) "../../style/color";

.canvas{ width: 100rpx; height: 100rpx; }


>circle.js
```javascript
// components/circle/circle.js
Component({
  multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    drawCircle() {
      const ctx = wx.createCanvasContext('myCanvas', this)
      ctx.arc(25, 25, 25, 0, 2 * Math.PI)
      ctx.setFillStyle('#EEEEEE')
      ctx.fill()
      ctx.draw()
    }
  },

  ready() {
    this.drawCircle()
  },

})
微信小程序 canvas 无法同时指定画布像素宽高和显示宽高

如果使用rpx,会同时动态调整画布像素宽高和显示宽高

固定画布像素宽高方法 画布像素宽高为512 ，512 画布显示宽高为 512*设备像素比

<Canvas
style="width: 512px; height: 512px;"
canvasId="myCanvasLut"
disable-scroll
className='myCanvasLut'
/>
WangShuXian6 commented 6 years ago

小程序代码片段

小程序动效按钮 wechatide://minicode/XVFuiymc7O17

WangShuXian6 commented 6 years ago

小程序二维码

获取二维码 https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html

WangShuXian6 commented 6 years ago

小程序 UI

个人头像，姓名

<!--components/avatar/avatar.wxml-->
<view class="container">
<open-data type="userAvatarUrl" class="user-avatar"></open-data>
<open-data type="userNickName" class="name"></open-data>
</view>

avatarColumn.less


@import (reference) "../../style/color";

@height: 100rpx; @fontSize: 26rpx;

.container { display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 146rpx; & > .user-avatar { display: flex; width: @height; height: @height; border-radius: 50%; overflow: hidden; } & > .name{ font-size: @fontSize; color: @white; } }

>avatarColumn.wxss
```css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 146rpx;
}
.container > .user-avatar {
  display: flex;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
}
.container > .name {
  font-size: 26rpx;
  color: #fff;
}

avatarColumn.js


// components/avatar/avatar.js
// 用户头像 答题页专用
Component({
/**
* 组件的属性列表
*/
properties: {
},

/**

WangShuXian6 commented 5 years ago

小程序 选择图片 上传图片

util 工具库 image.ts


import wepy from 'wepy'
import {APP, SiteId} from '@/config'
import {buildPostQueryString, buildSignature} from './sign'
import {SUCCESS, FAIL} from "@/constant/request"
import User from './user'
import {showLoading, hideLoading} from './common'

const getUid = (): string => { let user = new User() return user.uid }

const choosingImage = () => { return new Promise((resolve, reject) => { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths resolve({ type: SUCCESS, data: tempFilePaths }) }, fail(error) { resolve({ type: FAIL, data: error }) } }) }) }

export const asyncChooseImage = async () => { return await choosingImage() }

const uploadingImage = (url, tempFilePath: string, app, timestamp, signature, head = {}) => { return new Promise((resolve, reject) => { wx.uploadFile({ url, filePath: tempFilePath, name: 'file', header:{ ...head, 'app': app, 'timestamp': timestamp, 'siteid': SiteId, 'sign': signature, }, formData: {

  },
  success(response) {
    console.log('response--',response)
    const res=JSON.parse(response.data)
    console.log('res--',res)
    resolve({
      type: SUCCESS,
      statusCode: response.statusCode,
      code: response.data.code,
      data: res.data,
      msg: res.msg
    })
  },
  fail(error) {
    resolve({
      type: FAIL,
      data: error
    })
  }
})

}) }

export const asyncUploadImage = async (url, tempFilePath: string, head: object = {}) => { const memberid = getUid() const finalHead = Object.assign(head, {memberid}) const timestamp = +new Date() const siteid = SiteId const signature = buildSignature(timestamp, {memberid, siteid}, {}) return await uploadingImage(url, tempFilePath, APP, timestamp, signature, finalHead) }


>使用
```vue
WangShuXian6 commented 5 years ago

小程序 自定义顶部导航栏,添加背景图,自定义返回按钮

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

全局配置 window navigationStyle 导航栏样式，仅支持以下值：

  • default 默认样式

  • custom 自定义导航栏，只保留右上角胶囊按钮

小程序代码片段 wechatide://minicode/AMdHRJm27G3I

bg2

设置 navigationStyle /app.json

{
"pages": [
"index/index",
"index/main",
"index/second",
"index/halfPage"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
}
}

/index/second.wxml

<!--index/second.wxml-->
<view class="halfPage">
<image mode="top" src="{{bg}}" class="image"/>
<view class="arrow" bindtap="goback"></view>
<view class="home"></view>
</view>

/index/second.wxss


/* index/second.wxss */
.halfPage{
display: flex;
width: 100vw;
height: 100vh;
background-color: aliceblue;
}

.image{ position: fixed; top: 0; left: 0; display: flex; width: 100vw; height: 30vh; overflow: hidden; }

.arrow{ position: fixed; left: 40rpx; top: 73rpx; display: flex; width: 35rpx; height:35rpx; border-left: 4rpx solid #6dc6ff; border-top: 4rpx solid #6dc6ff; transform: rotate(-45deg); }


>/index/second.js
```javascript
// index/second.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bg:'/image/bg.jpg'
  },

  goback(){
    wx.navigateBack({delata:1})
  }
})
WangShuXian6 commented 5 years ago

模版消息

<form bindsubmit="formSubmit" report-submit>
<button formType="submit">Submit
</form>
formSubmit(e) {
let formId = event.detail.formId;
console.log('form发生了submit事件，推送码为：', formId)
}
WangShuXian6 commented 5 years ago

小程序登陆后获取加密信息[手机号等信息]流程

获取微信 code 用于登陆

用户触发获取手机信息事件

再次获取 code [解密手机号需要未使用过的 code ,此时旧版 code 已被登陆换取 session 使用，需重新生成]

将手机加密信息同最后获取的未使用的 code 一同传给服务端用于解密手机号

WangShuXian6 commented 5 years ago

小程序异常

事件名称最多22个字符

必须使用最新基础版本库

横向滚动 scroll-x 无效 ,必须设置子元素 display:inline-block;

.scroll-view-item_H{
width: 100px;
height: 100px;
display:inline-block;
}

微信的画布宽高由width属性和style.width属性共同决定，如果不一样，就会按微信的自己的乱七八糟逻辑进行缩放，而且style.width必须是px单位

微信小程序 —— button按钮去除border边框

button::after{ border: none; }
WangShuXian6 commented 5 years ago

微信小程序卡券

WangShuXian6 commented 4 years ago

微信小程序webview设置分享参数

微信小程序 index.ts

//index.js
//获取应用实例
//@ts-ignore
import { IMyApp } from "../../app";

//const app = getApp<IMyApp>()

Page({
  data: {
    canIUse: wx.canIUse("button.open-type.getUserInfo"),
    message: "222"
  },
  onLoad() {},

  onShareAppMessage(options) {
    console.log(options);
    //console.log(options.webViewUrl);
    return {
      title: this.data.message,
      path: "/pages/index/index",
      imageUrl: ""
    };
  },

  onMessage(e) {
    console.log("e:", e.detail);
    // @ts-ignore
    this.setData({ message: e.detail.data[0] });
  }
});

webview 页面 index.html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>midoci webview share</title>
    <style>
      .input {
        display: flex;
        width: 80vw;
        height: 30px;
        border: 1px solid rgb(31, 142, 206);
        border-radius: 4px;
        background-color: azure;
        color: rgb(31, 142, 206);
        font-size: 20px;
        margin: auto;
        margin-top: 30vh;
      }
    </style>
  </head>
  <body>
    <input type="text" class="input" placeholder="请输入分享文案" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script>
      function isWx() {
        return window.__wxjs_environment === "miniprogram";
      }

      const init = () => {
        console.log("start");

        const inputDom = document.querySelector(".input");

        const onInput = e => {
          console.log("e:", e.target.value);
          wx.miniProgram.postMessage({ data: e.target.value });
          //   setTimeout(() => {
          //     console.log("wx2");
          //     wx.miniProgram.redirectTo({
          //       url: `/pages/record/index`
          //     });
          //   }, 500);
        };

        inputDom.addEventListener("change", onInput);
      };

      onload = init();
    </script>
  </body>
</html>
WangShuXian6 commented 4 years ago

用户信息授权

<Button openType='getUserInfo' className='save-button' onGetUserInfo={getUserInfo}>授权以登录</Button>

 const getUserInfo = (e) => {
    console.log('e:', e)
    const detail: UserInfoDetail = e.detail
    const userInfo = detail.userInfo
  }

类型


export interface UserInfo {
avatarUrl: string; //头像 "https://wx.qlogo.cn/mmopen/vi_32/Q0j4T", 公网可访问
city: string; //城市 /直辖区的区 "Changping",
country: string; //国家  "China",
gender: 1 | 0; // 1男性 // 性别
language: string; //语言 "zh_CN"
nickName: string; //昵称 "小明"
province: string; // 省/直辖市 "Beijing"
}

export interface UserInfoDetail { encryptedData: string; //当之前登陆过时才有 包括敏感数据在内的完整用户信息的加密数据，详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95 iv: string; //当之前登陆过时 加密算法的初始向量，详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95 rawData: string; //不包括敏感信息的原始数据字符串，用于计算签名 signature: string; //使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html userInfo: UserInfo; }

const UserInfoDetailDemo = { encryptedData: "EYQ9", iv: "XmzR", //rawData: "{"nickName":"小明","gender":1,"language":"zh_CN","city":"Changping","province":"Beijing","country":"China","avatarUrl":"vhCHW1uSPvAibGVFchFZbtfThG73j1r81aMvdhNHsDSSMJg/132"}", signature: "f0de", userInfo: { avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4T", city: "Changping", country: "China", gender: 1, language: "zh_CN", nickName: "小明", province: "Beijing" } };