微信小程序基础

一、微信小程序

1.1 小程序介绍

• 运行在某个APP里面，比如微信：没有跨平台限制
• 微信小程序
  • Wechat Mini Program 是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可使用

1.2 小程序的应用

1.3 市场分类

二、开发微信小程序

2.1 创建

2.2 创建成功

2.3 开发

项目结构

与Vue对比

差异	vue框架	微信小程序
样式	style标签	.wxss文件
行为	script标签	.js文件
结构	template标签	.wxml文件
盒子	div	view
文本	span	text
属性绑定	<span :title='lay'></span>	<text title='{{msg}}'></text>
流程分支	v-for	wx:for
判断	v-if()=''/v-else	wx:if='{{}}'/wx:else
显示隐藏	v-show=''	hidden='{{}}'
生命周期	8种	应用3种+页面5种+组件6种
组件式路由	<router-link to='地址'></router-link>	<navigator url="地址"></navigator>
路由参数	<router-link to='地址?id=1'></router-link>	<navigator url="地址?id=1"></navigator>
网络请求	axios	wx.request()
绑定事件	@click	bindtop=''
双向绑定	v-model=''	bindinput=''
获取data数据	this.msg	this.data.msg
设置data数据	this.msg=''	this.setdata({msg:''})
创建方法	methods:{test(){}}	与data同级直接创建

2.4 基本创建结构

• app.js中新增一个页面(全局配置) ,会自动创建
• 默认打开第一个位置的页面

• 页面结构

2.5 移动设备的分辨率与rpx

在小程序中，一般使用iPhone6的设计稿，iPhone6下 1px = 1rpx = 0.5pt

使用rpx，小程序会自动在不同的分辨率下进行转换，简单理解为我们适配屏幕的rem

pt 也称为逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位

px 指物理分辨率，和屏幕尺寸没有关系，表示一个点

一个pt 可以由1个px构成，也可以是2个、3个。这个就是移动设备屏幕上的Reader倍数关系，如iPhone6、iPhone5的 @2x ; iPhone6 Plus的 @3x

iPhone6 上的一个pt就由2个px点构成，我们的设计稿一般是以px值进行设计

2.6 小程序的页面标签

标签中的自定义属性必须以 data- 开头

类似于div标签，表示一个容器

类似于 标签，表示一张图片 /表示根目录 不指定宽高的情况下默认宽度300px、高度225px

类似于标签，表示行内文本 只有被该标签包围的文本才能被长按选中 text标签可以嵌套text标签 会直接解析转义字符

图片轮播 样式和属性作用在 swiper标签上

2.7 关于小程序的数据赋值

请求回来的数据，使用 this.setData() 方法，传入需要赋值到data数据的变量

小程序总是会读取data对象里的数据来进行页面的数据绑定，这个动作是在onLoad事件之后执行的

var data = '获取到的数据'

this.setData(data)

如果获取到的数据是一个数组，那么需要传入一个对象

this.setData({ local_key: data});    // 这样在data里面就相当于有一个数组local_key

另一种赋值方式：在onLoad事件之中

this.data.变量名 = 获取到的数据

定义在app.js中的变量为全局变量，通过getApp() 获取

const golbalData = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlayMusic:true
  },

  like:function() {
    console.log(golbalData.isPlay)
  },
})

2.8 关于小程序的循环输出

使用标签将循环的内容包裹

wx:for = ‘{{ 循环数组 }}’ wx:for-item = ‘循环的值’ wx:key = ‘key值’ wx:for-index = ‘下标’

循环的值默认是 item , 这里的 wx:for-item也可以省略不写， wx:for-index 默认是 index

 var local_key = [1,2,3,4,5,6,7]

<block wx:for="{{local_key}}" wx:for-item="item" wx:key="unique">
    <view  class='list'>
      {{item}}
    </view>

2.9 关于小程序的事件绑定

需要在各个事件类型的前面加上 bind或 catch

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如点击事件： bind：tap

<text class='gofont' bind:tap="go">开启小程序之旅</text>

获取点击对象：

event.currentTarget 指的是事件捕获的组件对象 （即定义了方法的对象）

event.target 指的是事件触发的对象

2.10 小程序事件中的页面跳转

wx.navigateTo({
      url: '',                             // 跳转路劲
      success: function() {},    // 跳转成功执行方法
      fail: function() {},           // 跳转失败执行方法
      complete: function() {}   // 无论成功与否都执行的方法
    })

带参数的方式：直接在url路径后面进行拼接 带过去的参数可通过生命周期 onLoad 方法进行获取

  goDetail:function(event){
    const id = event.currentTarget.dataset.postid

    wx.navigateTo({
      url: '../detail/detail?id='+id,
    })
  },
接在url路径后面进行拼接  带过去的参数可通过生命周期 onLoad 方法进行获取

goDetail:function(event){
const id = event.currentTarget.dataset.postid

wx.navigateTo({
  url: '../detail/detail?id='+id,
})

},