微信小程序学习笔记

全局配置 app.json

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

js文件：

    this.setData({
    	 data:'data'
    })

wxml文件：

数据绑定 插值{{message}}

	Page({
		data: {
			message: 'Hello MINA!'
		}
	})

列表渲染

	<!--wxml-->
	<view wx:for="{{array}}" wx:key="key">{{item}}</view> 默认索引 index 元素 item

	// page.js

	Page({
	  data: {
	    array: [1, 2, 3, 4, 5]
	  }
	})

条件渲染

	<!--wxml-->
	// <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
	// <view wx:elif="{{view == 'APP'}}">APP</view>
	// <view wx:else="{{view == 'MINA'}}">MINA</view>

	// page.js
	Page({
	  data: {
	    view: 'MINA'
	  }
	})

模板

时间 bindtap 点击触发

wxss文件：

rpx单位 1px=2rpx

样式导入

	@import 'common.wxss'

自定义组件：

数据请求：

	let that = this;
    wx.request({
      url: '',
      method: 'GET',
      success:function (res) {
        console.log(res)
      }
    })

数据储存：

页面传值

1.通过url传值：

	主要是通过微信API的wx.navigateTo

	 wx.navigateTo({                                   //保留本页面，跳转到另一个页面
      url: '/pages/detail/detail?title='+title,       //传url+值
    })
	在详情页接受url传过来的值

	 onLoad: function (options) {
  	  	var title=options.title;
   	 	console.log('详情'+title);
  	}

2.通过设置全局变量传值

在 app.js 里设置一个全局变量host

App({
  onLaunch: function () {
  },
  globalData: {
    userInfo: null,
    host:'http://www.xzylogic.xyz/wx_Json_Img/bdy.json',
  }
})

然后在其他页面就可以取到host值
	const app=getApp();
	onLoad: function () {
  		let url = app.globalData.host;
  	}

3.通过本地缓存传值

## 储存数据：

	wx.setStorage({   // wx.setStorageSync同步设置 
	  key: 'key',
	  data: 'value'
	})

## 获取数据：

	wx.getStorage({    // wx.getStorageSync同步获取 
	  key: 'key',
	  success(res) {
	    console.log(res.data)
	  }
	})