微信小程序开发-----初体验（笔记）

微信小程序开发笔记（持续更新）

1.项目中所用到的data可以在index.js的page data下设置

2.wxml   --------------->  html标记对比

 ------------>

 ----------->

文本

Bindtap -----------> onclick

{{motto}}  --------->数据

3.条件判断

{{msg}}

另一个条件

4.数据遍历

Page({

arr: [{ 'name': '张三', 'age': 18 }, { 'name': '李四', 'age': 50 },  { 'name': "王五", 'age': 25 }]

})

表示方法一：

{{index}}------> {{item.name}}------>{{item.age}}}

表示方法二：

{{index}}

{{item.name}}

{{item.age}}}

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我