微信小程序开发笔记

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)
}
}
})

// 用 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")
    },
})

//其中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)
}

 /**
   * 用户单击右上角分享
   */
  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
)}
//操作成功弹窗
wx.showToast({
     title:'成功',
     icon:'success',
     duration:2000
})
//confirm 提示框
wx.showModal({
      title: '提示',
      content: '这是一个模态窗口',
      showCancel:false,//关闭取消按钮
      success:function(res){
            if(res.confirm){
              console.log('弹框后点取消')
            }else{
                console.log('弹框后点取消')
            }
      }
})

<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>