小程序开发过程知识点整理

使用的是uni-app 开发的小程序

引入第三方包通不过eslint的验证

引入第三方的包时,由于压缩的原因,通不过eslint的验证. 

需要将此文件加入到 .eslintignore  并且在文件的头部加入 /* eslint-disable */

小程序进入一个html的页面

使用webview 如下 创建一个新的页面,这个页面只有一个webview的组件, 组件的src指向 html的地址. 此地址的域名必须要在

小程序的授权里

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <view>
     
    
   

    

     

    
    

     
    <web-view :webview-styles="webviewStyles" :src="webview_src"></web-view>
     
    
   

    

     

    
    

     
  </view>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  name: 'webview',
     
    
   

    

     

    
    

     

        data () {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      loading: false,
     
    
   

    

     

    
    

     
      webview_src: '',
     
    
   

    

     

    
    

     
      orderDetail: {},
     
    
   

    

     

    
    

     
      webviewStyles: {
     
    
   

    

     

    
    

     
        progress: {
     
    
   

    

     

    
    

     
          color: '#FF3333'
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        onLoad (option) {
     
    
   

    

     

    
    

     
    if (option.webview_src) {
     
    
   

    

     

    
    

     
      this.webview_src = option.webview_src
     
    
   

    

     

    
    

     

          } else {
     
    
   

    

     

    
    

     

            uni.showToast({ title: '路径错误', icon: 'none' })
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {}
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

小程序将当前页面制作成二维码保存

需要先获取access_token

需要后端 调用微信接口

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=秘钥

返回 access_token 

  

   

    

     

    
    

     

      wx.request({
     
    
   

    

     

    
    

     
  //注意：下面的access_token值可以不可以直接复制使用，需要自己请求获取
     
    
   

    

     

    
    

     
  url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=AbgEb2z0il9eIsqn6pWJTmSkvTcJhtb1As3_e049Qv_iFnVw8TXKEa2N8nn3GBKJbQaJ9G2ae5At4Cirphd8HFaduGvMU14UpuWjJz6X0i74I8-',
     
    
   

    

     

    
    

     
  data: {
     
    
   

    

     

    
    

     
    scene: '000',
     
    
   

    

     

    
    

     
    page: "pages/index/index"  //这里按照需求设置值和参数 
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  method: "POST",
     
    
   

    

     

    
    

     
  responseType: 'arraybuffer',  //设置响应类型
     
    
   

    

     

    
    

     
  success(res) {
     
    
   

    

     

    
    

     
    console.log(res)
     
    
   

    

     

    
    

     
    var src2 = wx.arrayBufferToBase64(res.data);  //对数据进行转换操作
     
    
   

    

     

    
    

     

          that.setData({
     
    
   

    

     

    
    

     

            src2
     
    
   

    

     

    
    

     

          })
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  fail(e) {
     
    
   

    

     

    
    

     
    console.log(e)
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      })
     
    
  
 

小程序使用自定义的头部时  需要注意刘海手机的安全区域

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/105844193