mcya commented 6 years ago

微信小程序入坑

工具微信开发者工具

官网：https://mp.weixin.qq.com/cgi-bin/wx（工具文档都在这里）

结构

├─images                        # 图片
│
├─pages                         # 代码逻辑
│ ├─index
│ │  ├─index.js                 # JS
│ │  ├─index.json               # 配置重写
│ │  ├─index.wxml               # HTML
│ │  ├─index.wxss               # CSS
│
├─utils                         # 公共的js
│ 
├─app.js                        # 小程序逻辑
│
├─app.json                      # 小程序配置，配置导航条样式底部tab菜单
│ 
├─app.wxss                      # 公共的CSS

mcya commented 6 years ago

大概了解一下它的 `特点`

定义自己的标签。如`view`, `button`, `text` 等等, 多了一些 `wx:if` 这样的属性以及`{{ }}` 这样的表达式

你能看到react的js影子，还能体会到Vue的html便利

拥有自己的组件、API

mcya commented 6 years ago

比较杂乱的东西

一些常见的函数

onLoad 页面加载之后执行 onLaunch 小程序启动之后触发

本地存储

// 展示本地存储能力
    var logs = wx.getStorageSync('logs') || [] //取数据
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs) //存数据

自定义的一些组件

视图容器组件：容器、滚动scroll容器、滑动swiper组件基础内容：表单：导航：跳转，或是覆盖当前页或是新建页面。媒体：地图：画布：

竟然不能在 `app.json` 里面打注释，其中`app.json`所配置的文件都是相当于一个初始化默认值，如需要更改需要在对应的`page`中的JSON文件进行重新声明。最后一个对象还必须去掉逗号，真皮啊！

mcya commented 6 years ago

`app.json` 解读

值得注意的是，在实际的微信小程序开发是严格按照json格式进行操作，不能打注释！最后一项不能有逗号！

本注释只是为了解读~~ ye~


{
  "pages": [
    // 所有的页面必须在这里进行声明，必须注意一点是：当你删除了某个页面之后，务必来这里删除对应的路径！
    "page/component/index",
    "page/component/pages/view/view",
    "page/API/pages/my-play/my-play"
  ],
  "window": { //关于头部和状态栏的声明，如需更改对应的属性，需要在对应的页面重写对应的属性。
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "默认的title",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": { //配置底部属性
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [ //菜单
      {
        "pagePath": "page/component/index", //所声明的路径需要在
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件-app.json"
      },
      {
        "pagePath": "page/component/pages/view/view",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "自定义的走你"
      },
      {
        "pagePath": "page/API/pages/my-play/my-play",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      }
    ]
  },
  "networkTimeout": { //网络超时时间
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": false
}

还是看这里吧，更加完善的说明：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

mcya commented 6 years ago

关于`tabbar`

假如当前也是一级页面，到希望跳转到的页面不要有`Tabbar`时，不要使用 `redirectTo`而是使用 `navigateTo`就可以了

即需要Tabbar使用redirectTo跳转，不需要则用navigateTo

wx.navigateTo({
   url:'../reg/reg'
})

微信小程序目前没有用来隐藏tabBar的API，完全依靠跳转来实现。其中url为必填，注意参数用法。

mcya commented 6 years ago

关于二维码

新增讨论;用草料二维码生成带参二维码小程序，参数传入汉字，汉字转码了。页面路径 & 参数配置：pages/index/index?name=测试&mobileNo=15200000000。页面onload出来的name参数给我自动转码了，我在微信开发工具里面配置汉字，显示正常，这是什么问题？

讲道理，buildQuery的时候你应该做下encodeURIComponent，然后拿到的时候再做下decodeURIComponent

mcya commented 6 years ago

PDF预览

API-文件

wx.openDocument(OBJECT) 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx

https://mp.weixin.qq.com/debug/wxadoc/dev/api/file.html#wxopendocumentobject

需要注意：生产环境下，下载URL必须是https，而且必须在微信小程序管理控制台，即`https://mp.weixin.qq.com/wxopen/devprofile`，配置服务器域名，否则不报错，无法下载，也无法预览。

封装一个函数

// demo

// <view data-url="这是文档下载地址" data-type="pdf" catchtap='downloadFile'></view>

downloadFile: function (e) {
    console.log('e', e);
    let type = e.currentTarget.dataset.type;
    let url = e.currentTarget.dataset.url;
    switch (type) {
      case "pdf":
        url += 'pdf';
        break;
      case "word":
        url += 'docx';
        break;
      case "excel":
        url += 'xlsx';
        break;
      default:
        url += 'pptx';
        break;
    }
    wx.downloadFile({
      url: url,
      // header: {},
      success: function (res) {
        var filePath = res.tempFilePath;
        console.log('filePath', filePath);
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打开文档成功')
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        })
      },
      fail: function (res) {
        console.log('文件下载失败');
      },
      // complete: function (res) { },
    })
  }

//读取PDF文件 - vxkp
getfile: function () {
  let that=this
  that.setData({ send_file: 1 })
  wx.showLoading({
    title: 'loading',
  })
  setTimeout(function () {
    wx.hideLoading()
  }, 10000)
  let params = wx.getStorageSync('mydata').orderId + '|' + app.globalData.room[that.data.buildid][that.data.floor][that.data.roomIndex].roomid;
  wx.downloadFile({ //1.下载文档
    // 2.url
    url: app.globalData.serverPath + '/wxapi/login/getTemplate.do?tid=' + wx.getStorageSync('sysinfo').actinfo.templateid + '&param=' + params +'&type=download',
    success: function (res) {
      wx.hideLoading();
      that.setData({
        send_file: 0
      })
      var Path = res.tempFilePath
      wx.openDocument({ //3.读取文档
        filePath: Path, //4.文档返回成功路径
        fileType: 'doc', //5.需设置文档类型
        success: function (res) {
          console.log('打开文档成功')
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    fail: function (res) {
      console.log(res)
    }
  })
}

// 简化
getfile: function () {
  wx.downloadFile({ //1.下载文档
    // 2.url
    url: app.globalData.serverPath + '/action.do?params=params',
    success: function (res) {
      wx.openDocument({ //3.读取文档
        filePath: res.tempFilePath, //4.文档返回成功路径
        fileType: 'doc', //5.需设置文档类型
        success: function (res) { console.log('打开文档成功') },
        fail: function (res) { console.log(res) }
      })
    },
    fail: function (res) { console.log(res) }
  })
},

mcya commented 6 years ago

app.js

Hyupeng1006 commented 6 years ago

每次都能进入成功回调，但就是文件不出来，android手机上没有问题，每次都能打开，但是ios手机上出现频繁，只能偶尔打开?

mcya commented 6 years ago

每次都能进入成功回调，但就是文件不出来，安卓手机上没有问题，每次都能打开，但是IOS手机上出现频繁，只能偶尔打开？

在iOS 下是可以直接打开pdf 文件url 进行预览的。设置好域名后，再使用web-view 打开对应的文件就可以了。要注意文件路径中不能含有中文，否则会无法正确打开。

Hyupeng1006 commented 6 years ago

每次都能进入成功回调，但就是文件不出来，安卓手机上没有问题，每次都能打开，但是IOS手机上出现频繁，只能偶尔打开？

在iOS 下是可以直接打开pdf 文件url 进行预览的。设置好域名后，再使用web-view 打开对应的文件就可以了。要注意文件路径中不能含有中文，否则会无法正确打开。

文件路径没有中文。就是不管是pdf文件还是excel文件，都能下载成功，只是ios偶尔出现打不开的情况，wx.openDocument的sucess都已经执行到了，就是打不开文件

mcya commented 6 years ago

每次都能进入成功回调，但就是文件不出来，安卓手机上没有问题，每次都能打开，但是IOS手机上出现频繁，只能偶尔打开？

在iOS 下是可以直接打开pdf 文件url 进行预览的。设置好域名后，再使用web-view 打开对应的文件就可以了。要注意文件路径中不能含有中文，否则会无法正确打开。

文件路径没有中文。就是不管是pdf文件还是excel文件，都能下载成功，只是ios偶尔出现打不开的情况，wx.openDocument的sucess都已经执行到了，就是打不开文件

可能需要你设置文档类型！贴一份代码出来给你参考参考吧。这份代码再iOS和安卓都可以。

wechatimg78

mcya / JavaScriptExperience