微信小程序开发

1.微信开发者工具下载与安装配置

下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

7f0f293f7733ab0b14c7399dedfaaed.png
安装完成后微信扫码登录

44f74ebdef12c27386a72a6b9c18995.png
创建项目

1890ea6423dfdcf53a68474a1bcb8f2.png
项目设置
- 项目名称：根据项目名称填写
- 目录：设置文件存放目录
- AppID: 前往微信公众平台申请
- 开发模式：小程序
- 后端服务：不使用云服务
- 模板选择：选择 js基础模板

c9d7ed83f882c318b374d5f22ba8de9.png

2.AppID申请

前往(微信公众平台) https://mp.weixin.qq.com/
- 1点击右上角立即注册
- 2选择页面中的小程序选项
- 3点击前往注册跳转信息填写页面
根据步骤填写信息并注册

a3461d427faec408c3e5b5b41344869.png
注册成功后登录
- 复制 AppID
- 填写并打开
  
  e5c8411f55c4e4464f998b0c6af6aef.png

3.小程序文件结构

|—— app.js    # 小程序逻辑文件
|—— app.json  # 小程序配置文件
|—— app.wxss  # 全局公共样式文件
|—— pages     # 存放小程序的各个页面
|  |—— index  # index 页面
|  |   |—— index.js     # 页面逻辑
|  |   |—— index.wxml   # 页面结构
|  |   |—— index.wxss   # 页面样式表
|  |—— logs.wxss   # logs页面
|      |—— logs.js      # 页面逻辑
|      |—— logs.json    # 页面配置
|      |—— index.wxml   # 页面结构
|      |—— index.wxss   # 页面样式表
|—— project.config.js
|__ utils
   |__ utils.js

根目录下有三个文件：app.js, app.json,app.wxml,小程序必须有这三个文件，并且放在根目录下。这三个文件是应用程序级别的文件，与之平行的还有pages文件，用来存放小程序的各个页面

.wxml文件相当于html文件
.wxss文件相当于css文件
.json 文件用来配置页面的样式和行为

创建一个新页面

创建新页面只需要打开根目录下app.json文件，找到pages数组，在里面写一个页面路径，保存后即可自动创建
比如要在pages文件下创建一个about页面，只需要在pages数组中加入about页面要存放的地址(pages/about/about)
pages数组中的路径存在先后顺序，最前面的优先显示

d89524b9e8bcd46058ef1c3d132fdb0.png

配置tabBer页面

tabBer页面也就是小程序底部选项

4d5c6ddd9356f8a57abbfe2da4d784c.png
打开app.json 与 pages 同级，写入一个tabBer对象
json格式的文件，对象里面的最后一个属性，不要逗号，否则报错

"tabBar": {
    "color": "#999",  // 底部文字颜色
    "selectedColor": "#f40", // 触发点击后的文字颜色
    "backgroundColor": "#000", // 底部背景色
    // list数组中的每一个对象，代表一个tabBer按钮
    "list": [{
      "pagePath": "pages/index/index", // 导航按钮的对应的地址
      "text": "首页", // 导航按钮的描述文字
      "iconPath": "", // 导航按钮的图标地址
      "selectedIconPath": "" // 触发点击后的图标地址
      },{
      "pagePath": "pages/about/about",
      "text": "关于",
      "iconPath": "",
      "selectedIconPath": ""
    }]
  }

标签介绍

在微信小程序里，有专属的行标签和块标签

     <view></view> 块标签 相当于div标签
     <text></text> 行标签 相当于 span标签
     <image src="" mode=""/> 相当于 img标签
     <button></button> 按钮

.wxml 用来写页面框架，可以给view标签添加class名，然后在 .wxss文件中直接使用

<!-- .wxml -->
<view class="box"></view>

/* .wxss */
.box{
  /* 直接在此处写样式 保存即可在页面显示 */
}

标签样式

在微信小程序里中有独有的尺寸单位 rpx(推荐使用rpx)
这个是一个相对单位用来解决尺寸适配的问题
屏幕越大rpx 代表的单位越大

js文件

微信小程序的js文件与vue2的页面结构有相似之处
我们的函数事件和变量放在page({})
声明变量在page({}) 里写入一个data对象

page({
  data:{
    name:'张三'
  },
  //  在函数中使用变量 name
  getName(){
    // 如果需要修改name属性 使用this.setData({})
    // 格式 原属性名:新属性值
    this.setData({
        name:'李四'
    })
  }
  // 在生命周期中调用 getName 函数
  onLoad(options) {
    // 页面加载时触发
    this.getName();
  },
  
})

可以在.wxml 文件中用 {{}} 来获取js文件中定义的变量

<!-- 此时 name 属性已经改为 李四 -->
<view>{{name}}</view>

小程序中的for循环渲染列表

在data中加入一段数组


page({
  data:{
    name_list:[
      {id:"1",name:'张三',age:"21",sex:"男"}
      {id:"2",name:'李四',age:"22",sex:"男"}
      {id:"3",name:'王五',age:"23",sex:"男"}
      {id:"4",name:'翠花',age:"24",sex:"女"}
    ]
  },
})

语法 wx:for="{{name_list}}"
在微信小程序中for循环会默认将每一条数据表示为 item，循环数组的索引值表示为 index
key值尽量为数据的id值，

  <view wx:for="{{name_list}}" wx:key="id">
    <view>{{index}}</view>
    <view>姓名:{{item.name}}</view>
    <view>年龄:{{item.age}}</view>
    <view>性别:{{item.sex}}</view>
  </view>

也可以修改默认的 item 与 index 的写法
语法 wx:fro-item="冒号中写自己定义的名字"
语法 wx:fro-index="冒号中写自己定义的名字"
wx:key 的作用与vue中的key一样防止循环渲染混乱

  <view wx:for="{{name_list}}" wx:for-item="fitem" wx:for-index="findex" wx:key="id">
    <view>{{findex}}</view>
    <view>姓名:{{fitem.name}}</view>
    <view>年龄:{{fitem.age}}</view>
    <view>性别:{{fitem.sex}}</view>
  </view>

事件绑定

常用事件

类型    绑定方式                     描述
tap     bindtpa 或bind:tap         类似点击事件
input   bindinput 或bind:input     文本框输入事件
change  bindchange 或bind:change   文本框状态改变触发

语法格式

<!-- click_btn 为事件名 -->
<button bind:tap="click_btn">按钮</button>

// 在js这种直接写一个这样的函数
// 在页面中点击即可触发事件
 click_btn(){
   console.log('触发点击事件');
 }

事件传参
- 由于小程序并不能在事件名后加括号传参
- 可以使用 data-* 此处的* 可以自己起参数名
- *号的部分，不要使用驼峰命名,也就是不要出现大写
这个属性会存在点击事件的 event 属性上

<!-- 如果不带双括号 传递过去的是一个字符串  -->
<button bind:tap="click_btn" data-num="{{5}}">按钮</button>

在点击事件中传人 event 属性
如果是 button 标签绑定的事件取值
- 用 e.target.dataset.参数名
- 或者 e.currentTarget.dataset.参数名
view 等标签
- 用 e.currentTarget.dataset.参数名

// button  标签
 click_btn(e){
   console.log('触发点击事件');
   console.log(e);
  //  这两个都可以取到值
   console.log(e.target.dataset.num);
   console.log(e.currentTarget.dataset.num);
 },
//  view 标签
 click_btn(e){
   console.log('触发点击事件');
   console.log(e);
   console.log(e.currentTarget.dataset.num);
 },

也可以传递一个变量
在data属性中定义一个 num 后，只需要将双括号里的 5 改为 num

<button bind:tap="click_btn" data-num="{{num}}">按钮</button>

组件创建

在根目录下创建一个components文件夹
在这个文件夹中创建一个组件文件夹比如叫 comp1
右键这个comp1文件夹选择创建component
出现以下文件说明创建成功

558ac582fe41a52aef3063fd1ca6885.png
组件引入
- 分为全局和局部引入
- 全局引入，只需要在app.json中加入一个 usingComponents 的json对象
- 组件名：组件的地址

  "usingComponents":{
    "comp1":"/components/comp1/comp1",
  },

局部引入只需要用同样的方法在页面的json文件中引入
组件使用只需要在页面中以双标签的形式使用刚刚定义的组件名

组件通讯

父传子

在父页面中定义一个变量
在父页面的组件标签上自定义一个属性
让这个属性等于父页面的变量

<comp1 setDataName="{{name}}"></comp1>

子组件接收
- 在子组件的 properties属性中接收父组件的参数
- type 为数据类型
- value 存放传递的参数

  properties: {
    setDataName:{
      type:String,
      value:''
    }
  },

组件页面中渲染

<text>{{setDataName}}</text>

子传父

使用 triggerEvent() 事件，有两个参数
- 第一个：自定义事件名
- 第二个：要传递的参数
在子组件定义一个事件

// 子组件 wxml
<button bind:tap="parameter">向父页面传参</button>
// 子组件 js
  data: {
     msg:'这是子组件的一条数据'
  },
  parameter(){
      this.triggerEvent('getCompData',this.data.msg)
  },

父页面接收
- 在父页面的组件标签上绑定定义好的事件名
- 在js处理事件事件中传入一个形参
- 组件传递过来的参数在这个形参的 detail 属性上
- 在子组件上执行这个事件即可传递成功

// 父页面 wxml
<!-- 这是组件标签 -->
<comp2 bind:getCompdata="getCompdata"></comp2>
<view>comp2传递的参数在这：{{msg}}</view>

// 父页面 js
  data: {
     msg:''
  },
  getCompdata(e){
    console.log(e);
    this.setData({
      msg:e.detail
    })
  },

页面跳转

第一种使用标签但不可以跳转 tabBer页面
- url中写要跳转的地址

<!-- 相当于 a 标签 -->
<navigator url="">跳转</navigator>

第二种 wx.navigateTo

wx.navigateTo({
  url:"" //填写跳转地址
})

第三种 wx.redirectTo
- 关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于 window.open('.....');
- 跳转后左上角出现返回小箭头,点击后可返回原本页面.
第四种 wx.switchTab
- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面
第五种 wx.reLaunch
- 关闭所有页面，打开到应用内的某个页面。
- 跟 wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同

跳转传参

在路径后面加？拼接参数不加双括号传递的是字符串
- 标签传参尽量传递字符或者数字

<navigator url="/pages/shopping/shopping?id1={{name}}">跳转</navigator>

编程式导航也是同样的方法
- 可以传递对象和数组不过需要对数据转换json字符

let msg = JSON.stringify(this.data.msg)
wx.navigateTo({
  url: '/pages/shopping/shopping?msg='+ msg,
})

可以传递多个参数用&符合链接
参数接收
- 在生命周期的 onLoad 函数中接收
- 传递过来的参数在 options 里
上面传递过来的是json字符串，所以需要传还
- 用JOSN.parse()

  onLoad(options) {
    let msg = JSON.parse(options.msg)
   console.log(msg)
  },

小程序生命周期

微信小程序的生命周期分为三个部分：应用级生命周期、页面级生命周期、组件的生命周期

eb725d1bea62443758586f8d92ad6e3.png
一般在 onLoad中发送网络请求
页面生命周期执行的顺序是
- onLoad --> onShow --> onReady --> onHide

微信小程序 request 请求

在微信小程序中发起的是网络请求不存在跨域问题
格式

函数名(){
  wx.request({
    url:'url',// url 请求接口地址
    method:'GET|POST|...', // method 请求方式
    data:{'键':'值'}, // data 为请求参数
    success:(res)=>{
      // ... 回调函数，异步请求的回调函数
    },
    complete(res){

    },
    fail(res){

    }
  })
}

success 成功触发的函数
complete 成功与否都触发的函数
fail 失败触发的函数

微信小程序开发

微信小程序开发

1.微信开发者工具下载与安装配置

2.AppID申请

3.小程序文件结构

创建一个新页面

配置tabBer页面

标签介绍

标签样式

js文件

小程序中的for循环渲染列表

事件绑定

组件创建

组件通讯

父传子

子传父

页面跳转

跳转传参

小程序生命周期

微信小程序 request 请求

相关阅读更多精彩内容

友情链接更多精彩内容

微信小程序开发

1.微信开发者工具下载与安装配置

2.AppID申请

3.小程序文件结构

创建一个新页面

配置tabBer页面

标签介绍

标签样式

js文件

小程序中的for循环 渲染列表

事件绑定

组件创建

组件通讯

父传子

子传父

页面跳转

跳转传参

小程序生命周期

微信小程序 request 请求

相关阅读更多精彩内容

友情链接更多精彩内容

小程序中的for循环渲染列表