微信小程序开发笔记

利用webview内嵌vue页面

<web-view src="http://192.168.1.154:8080/?title={{title}}&url={{url}}&content={{content}}&type={{type}}">
​
</web-view>

抽取公共组件的方法

在.json文件内配置

{
​
  "usingComponents": {
​
 "icon": "tdesign-miniprogram/icon/icon",
​
  }
​
}

公共组件内利用 properties接收参数

  properties: {
​
   undertool: {
​
   type: Object,
​
   value: [],
​
   }, 
​
}

公共页面内调用组件并传参

<view>
​
<signed insuredsign="{{insuredsign}}" sign="{{sign}}"></signed>
​
</view>

第二种方法调用页面

利用include调取页面 

<include src="/pages/top/questionnairetop1/questionnairetop1"></include>

注意！！公共组件内的js格式只能是Component结构

外部页面重新跳转回微信小程序例如vue+html

backapp(){  
    wx.miniProgram.reLaunch({url: '/pages/home/home'}
       },

抽取公共js方法

新建一个.wxs后缀结尾的文件，里面写上需要公共调用的方法

例如：display.wxs

var indexOftwo =function(name,list) {
​
  if(list.indexOf(name)>=0){
​
    return true;
​
  }else{
​
    return false;
​
  }
​
}
​
module.exports = {
​
  indexOftwo: indexOftwo
​
 }

页面调用.wxs文件

<wxs src="../display.wxs" module="comTools" />

如何在微信小程序内调用阿里矢量图标

第一步建立一个.wxss后缀的文件里面放上矢量库复制的代码

例如：icon.wxss

@font-face {
​
  font-family: "iconfont"; /* Project id 3988438 */
​
  src: url('//at.alicdn.com/t/c/font_3988438_wf2b7remzfo.woff2?t=1681700135600') format('woff2'),
​
     url('//at.alicdn.com/t/c/font_3988438_wf2b7remzfo.woff?t=1681700135600') format('woff'),
​
     url('//at.alicdn.com/t/c/font_3988438_wf2b7remzfo.ttf?t=1681700135600') format('truetype');
​
 }
​
 .iconfont {
​
  font-family: "iconfont" !important;
​
  font-size: 16px;
​
  font-style: normal;
​
  -webkit-font-smoothing: antialiased;
​
  -moz-osx-font-smoothing: grayscale;
​
 } 
​
 .icon-shanchu:before {
​
  content: "\e600";
​
 }
​
 .icon-rili:before {
​
  content: "\e638";
​
 }

第二步在app.wxss内注册刚刚写好的矢量库文件

@import '/pages/questionnaire/styleicon.wxss';

第三步页面使用就可以了

<view class="iconfont icon-rili"></view>

微信小程序图片上传的js方法

 chooseImage() {
​
   let that =this
​
   wx.chooseImage({
​
•    count: 8, // 可选择的图片数量
​
•    sizeType: ['compressed'], // 压缩图片
​
•    sourceType: ['album', 'camera'], // 来源：相册或相机
​
•    success: (res)=> {
​
•      that.setData({
​
•       imageUrl: res.tempFilePaths
​
•      });
​
•     // this.uploadImage(res.tempFilePaths[0]);
​
•    }
​
   })
​
  },
​
  uploadImage(imagePath) {
​
   wx.uploadFile({
​
•    url: '服务器地址', // 上传图片的接口地址
​
•    filePath: imagePath, // 图片文件路径
​
•    name: 'image', 
​
•    success: (res) => {
​
•     // 上传成功后，将服务器返回的图片地址更新到image标签中
​
•     this.setData({
​
•      imageUrl: res.data
​
•     });
​
•    },
​
•    fail: function (res) {
​
•     console.log(res);
​
•    }
​
   })
​
  },