微信小程序开发笔记

wx.request({
url: 'https://xxx.com/api/GetData', //这里填写你的接口路径,注意一定要在微信小程序中授权过得https数字加密域名
method: 'get',//请求方式
header: { //接口口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了
'Content-Type': 'application/json'
},
data: {//请求数据
name: ''
},
success: function (res) {
 if (res.statusCode == 200) {//statusCode==200表示请求成功，有数据返回
 //这里就是请求成功后，进行一些函数操作
 console.log(res.data)//// 服务器回包内容
console.warn(res)
}},
fail: function (res) {
wx.showToast({ title: '系统错误' })
},
complete: () => {
wx.hideLoading();
} //complete接口执行后的回调函数，无论成功失败都会调用
});

wx.login({
success(res) {
if (res.code) {
// 发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
 code: res.code
},
method: 'post',
header:{'Content-Type':'application/json'},
success:function(res)
{
 //得到用户openid
console.log(res.openid);
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})

var：全局变量
let： 块级变量，又称之为局部变量
const：块级作用域，当时它属于不变的常量

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

data Object 页面的初始数据 
onLoad Function 生命周期函数--监听页面加载，首次进入会执行此方法进行数据加载，一个页面只会加载一次 
onReady Function 生命周期函数--监听页面初次渲染完成 
onShow Function 生命周期函数--监听页面显示，数据显示，每次打开页面都会加载一次 
onHide Function 生命周期函数--监听页面隐藏 
onUnload Function 生命周期函数--监听页面卸载

// 用 import 或者 require 引入模块 
1.import util from '../../../util/util.js'
2.var Promise = require('../../../plugin/promise.js')   

var that=this;//把this对象复制到临时变量that.

console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性

//本地缓存
wx.setStorage({
key: "cartResult",
data: cartResult
})

//小程序本地缓存
wx.setStorageSync(string key, any data)

//通过key获取缓存中的对象值：
 wx.getStorage({
      key: 'cartResult',
      success: res => {
        if (res.data.length > 0){
          this.setData({
            cartResult: true
          });}
      },
    })


//清空对应缓存：
wx.removeStorageSync('cartResult')


//清空小程序缓存
wx.clearStorageSync()

wx：for 控制属性绑定一个数组，
wx:for-item :当前数组变量名
wx:for-index 当前数组下标的一个变量名
wx:key:如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 
中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

//微信wxml列表循环：
<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.title}}
</view>

//js中
page({
data:{
items:[{title:'小明'},{title:'小红'}]
}
})

data:{
objIndex:[{name:'小明'},{name:'小红'},{name:'小姚'}]
}

//定义容器
let ContentArray=[];
//索引数据拼接
objIndex.forEach(function(item, index) {

ContentArray.push({name:item})

});

let dList=res.data.list;
let array=[];
for(var i in dList)
{
//数组拼接
array.push({
id:dList[i].Id,
menu_logo: dList[i].CoverImgId,
menu_name: dList[i].CategoryName,
price: dList[i].SalesPrice
});
}

第一种方式：
fucntion sayGoodbye()
{
//相应逻辑
}

//向外暴露
1.module.exports{
 sayGoodbye:sayGoodbye 
}
2.exports.sayHello=sayHello;

第二种方式：
//直接全部模块化
export default={
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
        
};

<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
 
Page({
    handleTap1:function(event){  //点击输出outer view bindtap
      console.log("outer view bindtap")
    },
    handleTap2: function (event) {  //点击输出middle view
      console.log("middle view catchtap")
    },
    handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap
      console.log("inner view bindtap")
    },
})

bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法
bindfocus: 指当我们的输入框获得焦点时触发，也就是鼠标或者手指点击到输入框时。
bindblur: 指输入框失去焦点是触发，也就是当我们敲击回车或手机上的完成又或者是点击屏幕上的空白处时触发。 
bindchange: 这个事件官方文档中没有写，它的效果和bindblur一样，至于看名字我们可能觉得bindchange在输入框中的内容不改变时不会触发，但是亲测即使内容不改变，bindchange事件也一样会触发。 
bindinput: 每输入一个字符都会进行一次检索，通常用于实时检索。但是这种方法对数据库的要求较高。
在bindblur或bindchange事件中我们通过event.detail.value获得swiper中的事件，左右滑动的时候，滑动结束会出发这个事件。

push 遇到数组参数时，把整个数组参数作为一个元素；
concat 则是拆开数组参数，一个元素一个元素地加进去。  
push 直接改变当前数组；concat 不改变当前数组。
//在原数组的同时，添加增加一个新的数据，如js中的append
goods.push.apply(goods, data); //将页面上面的数组和最新获取到的数组进行合并

//其中data-id为自定义属性值，可以按照自己的参数名称进行定义

<button bindtab='getcoupons' data-id='{{id}}' data-index='{{index}}'>领取</button>

 //js中:
 getcoupons(even){
 //直接看输出
 console.log(even);
 const id=even.currentarget.id;
 或者even.target.dataset.id
 }      

<navigator url='/page/index?id'>调转</navigator>

//页面监听，数据加载事件
onload:function(options)
{
    console.log(options.id)
}

wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch 关闭所有页面，打开到应用内的某个页面
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面
wx.navigateTo 保留当前页面，跳转到应用内的某个页面
wx.navigateBack 关闭当前页面，返回上一页面或多级页面

  /**
   * 用户单击右上角分享
   */
  onShareAppMessage: function() {
    let title = "你好"; //标题
    let path = "pages/home/home?fartherPhone="+app.globalData.Phone; //页面路径
    let imageUrl ='https://ad.yoweller.com/images/webimg/banner.jpg';//自定义图片地址
    return {
      title: title,
      path: path,
      imageUrl: imageUrl
    }
  }

<view class="set-default">
    <icon class="icon" type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>
    <text>默认地址</text>
</view>

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{provinceName}}</text>

//loading加载
wx.showToast({
     title: '加载中',
     icon:'loading',
     duration:10000
)}

<form bindsubmit='submit' bindreset='reset'> 
<button formtype='submit'>submit</button>//提交
<button formtype='reset'>reset</button>//重置
</form>

//首先使用form-type='submit'提交表单中的value数据时，需要在表单主键上加上name用作key
page({
submit:function(e)
{
    
}
})

//js
Page({
  data: {
    userInput: '',//定义文本框中的值
  },
  clearInput: function () {
    this.setData({
      userInput: ''
    });
  },
  //通过检索input文本框改变事件进行及时赋值
  bindKeyInput: function(e) {
    this.setData({
      userInput: e.detail.value
    });
  }
})

//wxml中
<input value="{{userInput}}" bindinput="bindKeyInput"></input>
<view bindtap="clearInput">点击清除输入框</view>

wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

< text selectable=’true’ >< text/>  只有文本内容在text内才可以复制，在外面的不能被复制