微信小程序开发记录

前言

        本章类容只是简单的介绍了一部分内容，大部分还是看看官方文档，那里比啥都全面，每个小节后面都链上了对应的文档

一、创建appid

        创建项目网址​https://mp.weixin.qq.com/​，创建成功后在开发管理，开发设置中看到appid，创建项目时填入即可，如果是别人的项目，则请创建项目的人邀请进去，也可以查找到对应的appid，一个微信号可以创建多个项目

二 、填写request合法域名

配置好自己的服务器域名

 

如果不填写也可以，可以在开发者工具中勾选不校验合法域

 

但是这种情况在真机调试中可能会报非法域名的错误，最好配置一下

这样创建一个简单的微信小程序就成功啦

三、标签

        view 盒子块级标签 相当于html的div        text 文本标签 相当于html的span

        scroll-view 滚动元素

        更多就不细说了 官方文档 

四、常用简单的事件属性介绍

        1、事件分类

                冒泡事件：bind（当一个组件上的事件被触发后，该事件会向父节点传递。）

                非冒泡事件：catch（当一个组件上的事件被触发后，该事件不会向父节点传递。）

                指定冒泡触发： mut-bind：（与上两者不同的是一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。）

        2、事件属性

               tap:点击事件（手指触摸后马上离开）               touchstart：手指触摸动作开始

               touchmove：手指触摸后移动                             touchend：手指触摸动作结束

        更多请见微信开发者文档

        3、标签属性

                wx:for 循环     wx:if 隐藏显示（不会渲染dom）hidden 显示隐藏（会渲染dom）

               model:value 双向绑定值 （缺点绑定引用类型时会有个报错提示）

五、说说每个页面的json属性吧 

{
  "usingComponents": { //定义组件
    "i-tabs": "/iview/tabs/index",
    "i-tab": "/iview/tab/index",
    "i-icon": "/iview/icon/index"
  },
  "navigationBarTitleText": "专家检查",  //导航栏标题文字内容
  "navigationBarBackgroundColor": "#0FA9F5", //导航栏背景颜色
  "navigationBarTextStyle": "white", //导航栏标题颜色，仅支持 black / white,
  "enablePullDownRefresh": true //是否开启当前页面下拉刷新
}

查看官方文档

六、夹杂方法

        1、自定义组件 Component 官方文档

        2、生命周期 官方文档 一般页面传参 在onLoad中有个option属性 里面就是接收跳转过来得到的参数

        3、页面跳转 官方文档

              常见的返回页面数据丢失问题，例如填写好了数据，点击跳转，在返回，填写的数据丢失

              解决方法

  var obj = {name:'张三'}
  var pages = getCurrentPages();
  var prevPage = pages[pages.length - 2]; //上一个页面
  prevPage.otherFun(obj) //传值
  // prevPage.$vm.otherFun(obj);//重点$vm
  wx.navigateBack({
     delta: 1  // 返回上一级页面。
  })

        4、加载动画、弹出提示、关闭加载动画 等界面交互 官方文档

        5、扫描二维码

wx.scanCode({
    success: function (res) {
           console.log(res.result,'scan');  
       }
})

        6、获取当前位置、微信内置地图查看位置

//获取当前位置信息
wx.getLocation({
 type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})
//打开地图查看位置
 wx.openLocation({
          latitude: 20, // 纬度
          longitude: 120, // 经度
          scale: 8, // 缩放比例
          name:"test",
          address:"武汉",
          success:function(r){
            console.log(r)
     }
 })

        5、事件传参的方法，以及实现input输入框的数据双向绑定

<!--wxml-->
<input type="text" value="{{formData.MONITORPROVINCENAME}}"  bindinput="bindInput" data-name="MONITORPROVINCENAME"/>

<!--js-->
    //数据双向绑定
    bindInput(e){
        // 表单双向数据绑定
        var that = this;
        var dataset = e.currentTarget.dataset;
        // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
        var name = dataset.name; 
        var value = e.detail.value;
        that.setData({
          [`formDatas.${name}`]: value
        });
    }