微信、QQ小程序

其他 2019-06-17 20:43:24 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30856231/article/details/82981138

QQ小程序兼容微信小程序。其不同点在最下方

warning：

要点

  • 服务器域名必须备案
  • 个人或企业先通过资质认证才能发布小程序
  • 小程序不能写cookie。将ud、sd加在header中携带
  • 小程序缓存是永久缓存。除非清掉
  • 小程序可以联测试机的地址联调，启动nginx,将测试机地址配置为nginx配置地址。

小程序分享

  • 开发工具中无法看到图片，但是使用预览，在手机上能够正确的转发并显示图片。
onShareAppMessage: function () {
  return {
    title: app.globalData.shareTitle,
    path: '/pages/jingxuan/jingxuan',
    imageUrl:'/image/share.png'
  }
},

随笔

  • 字体中划线text-decoration:line-through
  • 小程序生成二维码 http://goqr.me/api/ paidan小程序邀请页
  • 小程序滚动至顶部：wx.pageScrollTo({ scrollTop: 0 })
  • scroll view的那个nowrap会影响子元素换行
  • 小程序测试号配置https://developers.weixin.qq.com/sandbox?tab=miniprogram&hl=zh。可导入、新建代码片段进行代码尝试
  • 小程序加载background-image背景图片
  • 小程序分享【注意小程序js自动生成onShareAppMessage方法】,页面：<button class='join' open-type="share" data-info='{{item}}'>立即分享</button>
    • js:onShareAppMessage: function (res) { var data = res.target.dataset.info; return { title: data.title, imageUrl: data.pic, path: '' } }
  • 使用web_view打开h5页面。在公众号–开发者工具–开发者工具配置–添加开发者appid。
  • 超出省略：
*{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/* 超出2行省略 */
*{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
  • web_view参考种豆、派单
  • css阴影 transform: translate3d(0,-2px,0);box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  • 动态修改小程序标题
wx.setNavigationBarTitle({
    title: this.data._title
})

.searchwarp input::before{
    content: "";
    display: inline-block;
    width: 36rpx;
    height: 32rpx;
    background: url(http://img.heiyanimg.com/image/ico_search@2x.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 30rpx;
    top: 50%;
    transform: translateY(-50%);
}
  • 小程序选择地址：
  wx.chooseLocation({       
    success: res => {     // 用户选中地址 点击右上角 确定后  返回数据  res                              
      console.log(res);
      that.setData({
        address:res.address
      })
    }    
  })
  • 小程序input为数字键盘：微信小程序的 input 有个属性叫 type，这个 type 有几个可选值：
    • text：不必解释
    • number：数字键盘（无小数点）
    • idcard：数字键盘（无小数点、有个 X 键）
    • digit：数字键盘（有小数点）
    • 注意：number 是无小数点的，digit 是有小数点的
  • 小程序苹果6s兼容遇到的坑的总结
  • 测试

小程序登录 申请 注册

关于小程序登录的unionId，QQ小程序需要QQ互联申请，后台获取unionID,判断登录状态，返回给前端

小程序在iphoneX上的兼容性

  • iphoneX下边有虚拟按键，需要预留一定位置。

html

  <view class="nav-set {{isIpx?'fix-iphonex-button':''}}">

css

  /* 适配iphone x吸底 */
  .fix-iphonex-button {
    padding-bottom: 40rpx;
  }
  .fix-iphonex-button::after {
    content: ' ';
    position: fixed;
    bottom: 0!important;
    height: 68rpx!important;
    width: 100%;
    background: #fff;
  }

js

// 判断机型
isIpx:function(){
 var self=this;
 wx.getSystemInfo({
   success: function (res) {
     if (res.model.indexOf("iPhone X") >= 0){
       self.globalData.isIpx=true;
     }
   }
 })
},
设置变量。
globalData:{
 userInfo:null,
 isIpx:false,
},

小程序加载background-image背景图片

加载background-image背景图片

  • 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本
  • 2.在WXSS中使用以上文本：background-image: url(“data:image/png;base64,iVBORw0KGgo=…”);
  • 3.为了是背景图片自适应宽高，可以做如下设置：background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
.chapterContent .green::before{
	  background: url(data:image/png;base64,iVBORw0KGgoA...) center 0 no-repeat;
    background-size: cover;
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    content: ' ';
    z-index: 0;
}

小程序时间戳转换

format(shijianchuo) {
    var that = this;
    //shijianchuo是整数，否则要parseInt转换
    // 注意时间戳是否为秒。否则需要  shijianchuo * 1000
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + that.add0(m) + '-' + that.add0(d);
    // return y + '-' + that.add0(m) + '-' + that.add0(d) + ' ' + that.add0(h) + ':' + that.add0(mm) + ':' + that.add0(s);
  },
  add0(m) {
    return m < 10 ? '0' + m : m
  },
  
  var times = this.format(shijianchuo)

+ 小程序自定义头部导航栏【不建议使用。在iphoneX等有齐刘海的机型上会有一堆问题】

  • 1.在app.json中修改："navigationStyle": "custom"
  • 2.在html中：
<import src="/utils/template/commonHeader.wxml" />
<template is="commonHeader" data="{{headerInfo}}"></template>
  • 3.css中
@import "/utils/template/commonHeader.wxss";
  • 4.在js中：
data:{
  headerInfo: {
    headerName: '个人中心',
    headerFlag: 'home'
  }
}

  goback() {
    wx.navigateTo({
      url: '',
    })
  },
  gohome() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  gobackhome() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  }

上传图片

  1. 先在微信公众平台配置uploadFile合法域名
  2. 使用以下方法上传 上传图片
wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        // do something
      }
    })
  }
})

小程序登录

<button open-type='getUserInfo' class='btn mainBgColor' lang="zh_CN" bindgetuserinfo="goLogin">
微信登录
</button>

// 判断登录情况
goLogin: function() {
  var that = this
  var allreadyLogin = wx.getStorageSync('userInfo');
  if (!allreadyLogin) {
    wx.getUserInfo({
      success: function(res) {
        if (res.errMsg == 'getUserInfo:ok') {
          wx.setStorageSync('userInfo', JSON.stringify(res.userInfo))
        }
      }
    })
  }
  继续处理。。。
  
}

报错

小程序 Do not have choose handler in current page: pages/storeHome/storeHome.
解决方法：换一个方法名重新写方法。可能是和小程序的官方方法冲突

1.打开项目

  • 1.提示 点击获取openid
  • 1.1 部署：在 cloud-functions/login 文件夹右击选择 “创建并部署”
  • 1.2 再弹框中点击【开通-小程序~云开发】
  • 1.3 创建环境。firs-program-demo

2.新建页面：

  • 1.在pages上右键新建目录–test
  • 2.在test上右键新建page–test1.就会新建test1的项目文件，包括test1.js、test1.json、test1.wxml、test1.wxss文件。同时在app.json中会自动添加此页面的路由："pages/test/test"

3.微信小程序弹窗:

小程序弹窗

wx.showModal({
    title: '提示',
    content: params.data.msg,
    success: function (res) {
        if (res.confirm) {//这里是点击了确定以后
            console.log('用户点击确定')
        } else {//这里是点击了取消以后
            console.log('用户点击取消')
        }
    }
})
wx.showModal({
    title: '提示',
    icon: "none",
    content: "认购金额已退，请到我的钱包中查询",
    success(res) {
      if (res.confirm) {
        console.log('确定');
        that.getData();
      } else if (res.cancel) {
        console.log('取消');
      }
    }
  })
wx.showToast({
  title:'提示',
  icon: 'none'
  
})

小程序调试

http的不打开调试会出现很多问题
打开调试就OK了

小程序打开另一个小程序

  • 1.首先在app.json中加入另一个小程序的appid
{
  ...
  "navigateToMiniProgramAppIdList": [
    "wxdf30802**0c27"
  ]
}

wx.navigateToMiniProgram({
  appId: 'wxdf30802**0c27',
  path: 'pages/index/index?id=123',
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  }
})

小程序 git 状态展示

文件图标状态-官网定义:

目录树:
  • U 文件未追踪
  • A 新文件(Added,Staged)
  • M 文件有修改（Modified,Staged）
  • C 文件有冲突（Confict）
  • D 文件被删除（Delete）
文件夹目录图标状态的含义:
  • 小红点 目录下至少存在一个删除状态的文件
  • 小橙点 目录下至少存在一个冲突状态的文件
  • 小蓝点 目录下至少存在一个未追踪状态的文件
  • 小绿点 目录下至少存在一个修改状态的文件
文件编辑

显示与上一版本内容的比较

  • 蓝色线条 此处的代码有变动
  • 绿色线条 此处的代码是新增的
  • 蓝红色三角箭头 此处的代码被删除

设置启动页面

开发时，项目编译想直接进入我们编译的页面

扫描二维码关注公众号，回复： 6534670 查看本文章
  • 方法一：在app.json中，pages数组，设置在第一个的页面，就是启动页面
  • 方法二：开发者工具中，编译选项处，添加编译模式—勾选‘下次编译时模拟更新’，将路径修改为要进入的路径

小程序和VUE区别

小程序：if

if:

    <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
    <view wx:elif="{{view == 'APP'}}">APP</view>
    <view wx:else="{{view == 'MINA'}}">MINA</view>
  • 注意条件中的true是否带引号'true'

小程序页面跳转

  • 1.类似于a标签
   <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator>
   <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator>
  • 2.js跳转
wx.navigateTo({
  url:'/pages/target/url'
})

返回上一页面
wx.navigateBack();

获取小程序页面滚动条高度

var query = wx.createSelectorQuery()
query.select('#book-id').boundingClientRect(function(res) {
  if(res.bottom>1000){
    that.setData({
      bookShow:false
    });
  }
}).exec()

微信小程序获取当前页面的路径的方式

使用`getCurrentPages`可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options

小程序设置置顶

wx.pageScrollTo({
  scrollTop: 0
})

小程序缓存

// 保存
wx.setStorage({
  key:'',
  data:''
})

wx.setStorageSync(key,data)


// 获取
wx.getStorage({
    key:'data',
    success(res){
      console.log(res.data);
    }
})

// 清除
wx.clearStorage();

注意事项

  • 自定义方法写在onLoad、onReady、onShow方法之后

小程序onReachBottom不执行

原因：
最外层设置了display:flex、display:position
小程序onReachBottom不执行，{onReachBottomDistance:100}这个属性也设置了，上拉页面为什么不执行onReachBottom？

跳转回首页

只能用switchTab跳转首页、tab页面

wx.switchTab({
  url: '/pages/index/index'
})

小程序 for循环子

<view wx:for="{{list}}" wx:for-item="items">
    {{items}}
</view>

获取滚动条当前位置

onPageScroll:function(e){ // 获取滚动条当前位置
  console.log(e)
},

小程序类名判断

<view class="title {{tabFixed ? 'tab-fixed':''}}">
  <h5 class="singleline">{{book.name}}</h5>
</view>

1.请检查login云函数是否部署

请检查login云函数是否部署

2. 报错：

Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:64412
修改：设置–代理设置
从：使用系统代理 --》改为 不适用任何代理

data中可以声明t:null,传值 setInterval

data: {
    t: null,
},
getPageScroll（）{
    let t = setInterval(function () {
      that.getPageScroll(t);
    }, 1000)
}，
onUnload: function() {
    console.log("onUnload---")
    clearInterval(this.data.t);
},

小程序生命周期

当退出此页面时：


  /**
   * 页面的初始数据
   */
  data: {

  },

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

  },

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

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: app.globalData.shareTitle,
      path: '/pages/jingxuan/jingxuan',
      imageUrl:'/image/share.png'
    }
  }

——————————————————————————————————

QQ小程序

小程序的union是后台获取。与前台无关。

  • QQ小程序的unionId需要通过QQ互联将小程序ID绑定才能拿到。
  • QQ小程序需先申请、注册用户才能
  • 1、ide（分mac和windows）
  • 2、开发者管理端链接：https://q.qq.com（一定要先注册）
  • 3、各类文档【开发、设计、运营等各类文档】：打开https://q.qq.com/wiki/查看各类文档（如果没有登录开发者管理端会提示先登录），文档是动态更新的，会不断更新新增API、能力等
  • 4、体验版QQ安装包，但目前该版本尚未灰度发布，故需请各位开发者「把需要登陆手机QQ的号码登记到 https://docs.qq.com/form/fill/DQUtSZndwR2ZMSWdw
    中」，以便给各位开通体验白名单

QQ小程序的分享配置

  <button open-type="share">分享</button>

  onLoad: function () {
    qq.showShareMenu({
      showShareItems: ['qq', 'qzone']
    });
    // wx.hideShareMenu(); // 隐藏右上角的分享按钮
  },
  onShareAppMessage: function () {
    if (this.data.cBook.bookId) {
      return {
        title: '推荐给你超好看的小说《' + this.data.cBook.bookName + '》',
        path: '/pages/jingxuan/jingxuan?bookId=' + this.data.cBook.bookId + '&form=share',
        imageUrl: this.data.cBook.iconUrlSmall
      }
    } else {
      return {
        title: app.globalData.shareTitle,
        path: '/pages/shelf/shelf',
        imageUrl: app.globalData.imageUrl
      }
    }
  },

QQ小程序 web-view需申请开通权限

1.开放对象
仅面向非个人开发者开放，需二审核类目的暂不开放

2.申请条件
① 合理使用 web-view，不影响用户体验，首页不能是 webview，页面 webview 占比总页面数（path）≤30%。
② 申请的跳转的域名有ICP备案。
③符合类目且无平台安全违规记录，如后续在使用中有违规行为平台将禁止接口能力。

3.申请流程
邮件标题：【web-view 能力】XX 小程序申请
邮件格式：请写明申请原因\使用场景\小程序基础信息（包含 APPID+小程序名称+公司主体）发送邮件[email protected]，
         审批通过的小程序会在3个工作日给予API配置。

小程序无法打开应用宝、App Store。

安卓手机—小程序web-view可以打开应用宝页面，并下载安卓apk。（前提是业务域名配置好应用宝域名。a.app.qq.com，wxz.myapp.com）
IOS—无法下载.

猜你喜欢

转载自blog.csdn.net/qq_30856231/article/details/82981138
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022