微信、QQ小程序：上传前必看！隐藏的文件夹清单

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

小程序header问题

小程序真机调试时，http2.0版本请求，把header中的key都改成了小写。所以header中携带的信息需要后台单独处理

下载文件：

uploadfile 和 downloadfile 的 合法 域名 没填写会打不开文档

小程序开发：需要校验域名的，打开开发者调试，就能用了。

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

根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引

• sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，

  • 可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

  • 开发工具更新后,代码有些地方需要做相应的调整

  • “checkSiteMap”: false,

播放音频，只支持在线播放

 const backgroundAudioManager = wx.getBackgroundAudioManager()
    // backgroundAudioManager.title = '此时此刻'
    // backgroundAudioManager.epname = '此时此刻'
    // backgroundAudioManager.singer = '许巍'
    // backgroundAudioManager.coverImgUrl = ''
    if (hour >= 0 && hour < 7) {
      // 设置了 src 之后会自动播放
      backgroundAudioManager.src = '

要点

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

分包加载

• 设置：只要在 app.json subpackages 中加：
  • 其中加入 independent:true 就是独立分包

{"pages":["pages/index","pages/logs"],"subpackages":[{"root":"packageA","name":"fenbaoming","pages":["pages/cat","pages/dog"]}]}

小程序分享

• 开发工具中无法看到图片，但是使用预览，在手机上能够正确的转发并显示图片。

onShareAppMessage: function () {
  return {
    title: app.globalData.shareTitle,
    path: '/pages/jingxuan/jingxuan',
    imageUrl:'/image/share.png'
  }
},

随笔

• 小程序加载
• 字体中划线 text-decoration:line-through
• 小程序生成二维码 paidan小程序邀请页
• 小程序滚动至顶部： wx.pageScrollTo({ scrollTop: 0 })
• scroll view 的那个 nowrap 会影响子元素换行
• 。可导入、新建代码片段进行代码尝试
• 小程序加载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);
• 设置小程序标题背景色：json: "navigationBarBackgroundColor": "#f9f9f9",
• 动态修改小程序标题

wx.setNavigationBarTitle({
    title: this.data._title
})

• 小程序自定义头部导航栏 "navigationStyle": "custom"
• 图片裁剪、上传 .例：商贷–商家店铺–商品详情编辑
• 小程序定位、地图。
• 使用
• 小程序css中不能直接引入本地图片，但可引入图片地址链接

.searchwarp input::before{content:"";display: inline-block;width: 36rpx;height: 32rpx;background:url() 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 是有小数点的

小程序登录 申请 注册

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

小程序在iphoneX上的兼容性

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

html

<viewclass="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背景图片

• 1.在网站 上将图片转成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 * 1000var time =newDate(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中：

<importsrc="/utils/template/commonHeader.wxml"/><templateis="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: ' // 仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        // do something
      }
    })
  }
})

小程序登录

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

// 判断登录情况goLogin:function(){var that =thisvar 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();}elseif(res.cancel){
        console.log('取消');}}})
wx.showToast({
  title:'提示',
  icon:'none'})

小程序调试

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

小程序打开另一个小程序

• 1.首先在 app.json 中加入另一个小程序的appid

{
  ...
  "navigateToMiniProgramAppIdList": [
    "wxdf30802**0c27"
  ]
}

• 2.参考微信官方文档，

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）

文件夹目录图标状态的含义:

• 小红点 目录下至少存在一个删除状态的文件
• 小橙点 目录下至少存在一个冲突状态的文件
• 小蓝点 目录下至少存在一个未追踪状态的文件
• 小绿点 目录下至少存在一个修改状态的文件

文件编辑

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

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

设置启动页面

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

• 方法一：在app.json中，pages数组，设置在第一个的页面，就是启动页面
• 方法二：开发者工具中，编译选项处，添加编译模式—勾选‘下次编译时模拟更新’，将路径修改为要进入的路径

小程序和VUE区别

小程序：if

if:

<viewwx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view><viewwx:elif="{{view == 'APP'}}">APP</view><viewwx: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 //当前页面urlvar 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云函数是否部署

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

请求方式 params 和 data

// data方式
    app.apiRequest('/pldk-open/open/hjzx/hjzxTeam/apply','POST',JSON.stringify(params),{"content-type":"application/json"}).then(res=>{
      wx.hideLoading();
      console.log("团队提交", res.data);if(res.data.code ==200){
        wx.showToast({
          title: res.data.msg
        })setTimeout(()=>{
          wx.navigateBack()},1000)}else{
        wx.showToast({
          title: res.data.msg,
          icon:'none'})}});//params方式
    app.apiRequest('/pldk-open/open/hjzx/hjzxTeam/apply','POST', params,{{"content-type":"application/x-www-form-urlencoded;charset=utf-8"}}).then(res=>{
      wx.hideLoading();
      console.log("团队提交", res.data);if(res.data.code ==200){
        wx.showToast({
          title: res.data.msg
        })setTimeout(()=>{
          wx.navigateBack()},1000)}else{
        wx.showToast({
          title: res.data.msg,
          icon:'none'})}});

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

QQ小程序

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

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

QQ小程序的分享配置

<buttonopen-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+小程序名称+公司主体）发送邮件qq-miniprogram@tencent.com，
         审批通过的小程序会在3个工作日给予API配置。

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

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