微信小程序开发记录

程序开发记录"/>

微信小程序开发记录

前言

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

一、创建appid

        创建项目网址​/​，创建成功后在开发管理，开发设置中看到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);//重点$vmwx.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.latitudeconst longitude = res.longitudeconst speed = res.speedconst 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});}