前言
本章类容只是简单的介绍了一部分内容,大部分还是看看官方文档,那里比啥都全面,每个小节后面都链上了对应的文档
一、创建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
});
}