微信小程序开发笔记（持续更新）
1.项目中所用到的data可以在index.js的page data下设置
2.wxml ---------------> html标记对比
<view>------------> <div>
<text>-----------> <p>文本
Bindtap -----------> onclick
{{motto}} --------->数据
3.条件判断
<text wx:if="{{msg!='hello'}}">{{msg}}</text>
<text wx:elif="{{msg == "world"}}">另一个条件</text>
<text wx:else></text>
4.数据遍历
Page({
arr: [{ 'name': '张三', 'age': 18 }, { 'name': '李四', 'age': 50 }, { 'name': "王五", 'age': 25 }]
})
表示方法一：
<view wx:for="{{arr}}">{{index}}------> {{item.name}}------>{{item.age}}}</view>
表示方法二：
<block wx:for="{{arr}}">
<view>{{index}}</view>
<view>{{item.name}}</view>
<view>{{item.age}}}</view>
</block>
Index数组下标 item 数组当前名 （这两个值都是可以自己设置的，默认是index item）
5.选择图片，更换头像
chooseimg:function(){ //chooseimg这个方法自己定义
var that = this
wx.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success: function(res) {
that.setData({myphoto:res.tempFilePaths})
},
})
}
6.表单提交
wx.setStorageSync（key,value） 同步存放数据
Wx.getStorageSync(key) 同步获取数据
//以上两个方法相当于同步提交数据
wx.setStorage({key:’key’,data:value});
wx.getStorage({key:’key’,success:function(res){that.setData({})}})
//以上两个方法相当于异步提交数据
7.引入百度地图
1）申请百度地图ak
2）下载百度地图js
3）在需要引用的wxml对应的js文件中引入百度地图js
var bmap = require('../../utils/bmap-wx.min.js');
var wxMarkerData = []; //定位成功回调对象
calladdress:function(){//方法调用
var that = this;
var BMap = new bmap.BMapWX({
ak: '#####' //填写申请的ak
});
var fail = function (data) {
console.log(data)
};
var success = function (data) {
wxMarkerData = data.wxMarkerData;
console.log(wxMarkerData);
wx.openLocation({ //在地图中打开
latitude: wxMarkerData[0].latitude,
longitude: wxMarkerData[0].longitude,
name: wxMarkerData[0].address,
scale: 28
});
}
BMap.regeocoding({
fail: fail,
success: success,
iconPath: './images/marker_red.png',
iconTapPath: './images/img/marker_red.png'
});
}
8.引用外部字体
微信小程序暂时不支持像html那样引入字体，需要如下步骤
1）下载字体
2）将字体在字体文件转换地址进行转换
3）然后将转成的css文件内的内容复制到wxss中
9.根据手机屏幕来显示不同的样式（也可以用flex布局来设置）
onLoad: function (options) {
var that = this;
wx.getSystemInfo({//获取屏幕的宽，高
success: function (res) {
if (res.windowWidth > 375) {//根据不同的宽高来设置样式
that.setData({
leftmargin: '15px'
});
}
}
});
}
在wxml中直接style="margin-left:{{leftmargin}}"即可
以上只是本人从最初开发记录的笔记，不是系统的开发介绍，如需学习请参考博客：王乐平技术博客，或者是有需要讨论的可简书call我
网友评论