第一章 小程序开发知识

前言

这是小编自己开发小程序的记录，记录小程序开发过程的知识+一些需求的解决方法。

一、基础知识

1.block

1.无样式容器（template） 2.配合条件渲染 wx:if wx:elif wx:else
3.hidden：类似show，注意，hidden：true，隐藏

2.背景图

1.相对路径不生效 2.适用网络地址、行内样式、base64图片流。

3.调用腾讯地图

wx.openLocation

	wx.openLocation({
		latitude, // 经度
		longitude, // 纬度
		name, // 位置名
		address, // 要去地址的详细说明
		scale: 28, // 地图多缩放级别，整形值，范围：1~28，默认为最大
		success:()=>{},
		fail:()=>{},
		complete:()=>{}
	})

4.微信原生与h5之间的相互跳转

1、小程序跳转h5

跳转至web-view页面

	// 其他页面传参的时候需要对src进行加密处理，否则参数
    wx.navigateTo({
      url: '/pages/webview/index?url=' + encodeURIComponent(src),
    })

/pages/webview/index页面的基础设置

web-view页面在上线时需要对web-view页面传入的src的基地址进行配置，否则页面不展示！

	<web-view src="{{src}}"></web-view>
	 // src地址就是你的h5地址  https://---.html?key=1

	onLoad(options){
		this.setData({
			src：decodeURIComponent(options.src);
		})
	}

2、h5跳回小程序

h5跳回小程序 js文件请导入最新的版本

	<script  src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"  />

h5跳回小程序

	wx.miniProgram.redirectTo({url: '你的页面地址'})
	wx.miniProgram.navigateTo({url: '你的页面地址'})
	wx.miniProgram.navigateBack();
	// 还有其他的类型 请根据微信开发文档参考 不同的api的跳转有不同的作用

5.生成二维码

1.引入 weapp.qrcode.js 文件 2.text：内容信息

	<-- 宽高是动态设置的 -->
	<canvas style="width: {{Width}}px;height:{{Height}}px;" canvas-id="myQrcode"></canvas>

	qrcode({
	    width, // 二维码宽度
	    height, // 二维码高度
	    canvasId: 'myCode', // 画布ID
	    text, // 二维码内容，可能是链接或者一段字符串
		image: { // 二维码中心logo配置
		    imageResource:'图片地址', // logo图片路径
		    dx: Width / 2 - 12, // logo在x轴的位置
		    dy: Height / 2 - 15, //  logo在y轴的位置
		    dwidth: 30, // logo显示宽度
		    dheight: 30 // logo显示高度
		}
	})

6.微信支付

wx.requestPayment

wx.request({
	...参数， // 此处调用后端接口 获取需要的参数
	success：(res)=>{
		wx.requestPayment({
		    timestamp: res.timeStamp,
		    nonceStr: res.nonceStr,
		    package: res.package,
		    signType: res.signType,
		    paySign: res.paySign,
		    success(res) {
				// 支付成功的后续业务逻辑
		    },
		    fail(res) {}
		})
	}
})

如果需要在微信中使用支付宝支付，只能调用后端接口获取支付链接，然后通过复制链接或者生成二维码的方式进行支付宝的支付

总结

本文介绍了微信小程序的部分简单内容作为开发记录。