微信小程序个人技术总结

这个作业属于哪个课程	<福州大学2021春软件工程实践S班>
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	相关技术博客
参考文献	无

目录

• 技术概述
• 技术详述
  • flex布局
  • 微信小程序的数据绑定
    • 数据流向
      • 单向数据绑定
        • data，setData
        • js当中函数
      • Mustache语法解析
  • 渲染
    • 条件渲染
    • 列表渲染
  • 事件
    • 用bind绑定事件执行回调
    • bind与catch的区别
  • 路由
    • js模块导入导出
  • 自定义组件
    • 组件属性
  • 外部样式类
    • 提高样式优先级
    • 组件独立性
    • 自定义事件
  • 数据传递
    • app.js
      • 生命周期
      • 保存全局变量
    • 小程序缓存
      • 异步获取时
    • 组件获取值
  • tabBar
    • 跳到带有tabBar选项卡的页面
  • this指针
• 问题，解决方案
• 总结

技术概述

微信小程序是类似于Vue的较于Vue的更简单的开发前端代码。新版微信小程序，增加了数据响应，模板语法，也就使得开发变得更加便捷，更加类似Vue，但上手更简单，更好理解。学习这些技术可以更好的开发。当涉及到页面布局，页面响应，页面渲染，页面响应时间，页面引用组件，页面跳转时，这些技术就必不可少

技术详述

flex布局

容器组件

//flex布局
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
   //align-items: baseline;//按照容器基线对齐
  justify-content: center;
   //justify-content: space-between 两端
   //justify-content: space-around 等距
   //flex-wrap : wrap 超过就换行
}

align-items:center

交叉轴居中

justify-content: center;

主轴居中

主轴：row排列，x轴就是主轴

​ column排列，y就是主轴

交叉轴：另外一条轴

微信小程序的数据绑定

数据流向

• 单向数据绑定
  • JS从服务器获取数据
  • JS通过setData将数据绑定到视图
• 简易双向数据绑定，实现数据同步（类似Vue）

单向数据绑定

• js文件
  • onload
    • 页面加载时执行的代码
  • data
    • data下定义的变量，可以在wxml上用

data，setData

js文件当中

data{
    a:"123"
}
onLoad{
    this.setData({
        b:"2021"
    })
}

应用

<text>{{a+b}}</text>

数据优先

原生js DOM优先

js当中函数

onReachBottom 触底时

onPullDownRefrash 下拉刷新时

Mustache语法解析

{{}}

多层json就直接什么.什么

也可以加表达式

渲染

条件渲染

<wx:if={{flag}}>
<wx:else>

列表渲染

content内容多时，用数组[{},{}]显示

此时 this.setData({ posts:content })

wx:for 放在要循环的内容外

用 包裹

同时内部的数据取时

用item.content

👆是因为默认的wx:for-item="item"

也可以修改成其他的，就可以用不同的内容开头了

 <block wx:for="{{posts}}">
    <view class="post-container">
      <view class="post-author-date">
        <image src="{{item.headImgSrc}}" class="post-author"></image>
        <text class="post-date">{{item.date}}</text>
      </view>

      <text class="post-title">{{item.title}}</text>

      <image src="{{item.imgsrc}}" class="post-image"></image>

      <text class="post-content">{{item.content}}</text>

      <view class="post-like">
        <li-icon name="favor" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.collection}}</text>
        <li-icon name="eye" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.reading}}</text>
      </view>
    </view>
  </block>

• 属性
  • wx:for-item="item"
    • 默认item
    • 每一项前面要添加的内容
  • wx:for-index="index"
    • 默认index
    • 每一项的索引获取
  • wx:key="id"
    • 键值
    • 不加{{}}，不然会警告

事件

tap 点击事件

用bind绑定事件执行回调

<view bind:tap="onTap" class="btn-container"></view>

onTap: fucntion(){
    
}

也可以用catch：tap

bind与catch的区别

• catch
  • 阻止向上冒泡
• bind
  • 不阻止向上冒泡

路由

• wx.navigateTo({
  	url:"/pages/page"
  })
  

  左上角有一个返回箭头

  相当于一个页面的子页面，可以返回到上一级

  ​ 最多只能有10级子页面

  • 跳转出去时，原来页面不会被销毁

• wx.redirectTo({
  	url:""
  })
  

  左上角就没有返回箭头了

  左上角有一个home按钮，可以跳转到首页

  • 跳转出去时，原来页面会被销毁掉

js模块导入导出

单独将data数据分离到一个data.js数据当中

• 数据导出

  • module.exports={
    	postList : local_database
    }
    

  • export{
    	postList
    }
    

    后续导入的时候，需要保证同名

• 数据导入

  • var postData = require("")
    //里面只能跟相对路径
    

    只能跟相对路径

  • import {postList} from "../../data/data.js"
    

自定义组件

• 使用

  • 在要使用的页面的json文件当中

     "usingComponents": {
        "li-icon":"/miniprogram_npm/lin-ui/icon/index"
      }
    

组件属性

• 写在组件js文件的properties中

• properties: {
     text:{
       type:String,
       value:'123'
     }
   },
  

• text:String
  
  //默认值是每种类型的默认值
  

• properties定义的内容和data一样可以做数据绑定

外部样式类

当外部使用组件样式不生效时候

可以定义外部样式类

调用组件的页面定义样式，组件去使用

<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>

组件

externalClasses:['f-class'],
  
properties: {

  },

提高样式优先级

movie-list{
    background-color:teal !important;
}

组件独立性

每个组件事件不一样

自定义事件

让组件使用者决定响应什么事件

• 组件

<view  bind:tap="onTap" data-pid="0"></view>

 methods: {
    onTap (event){
      this.triggerEvent('posttap',{
          pid : event.currentTarget.dataset.pid
      })
    }
  }

• 调用组件位置（父组件）

  <post bind:posttap = "onGoToDetail"/>
  

  //获取data
  onGoToDetail(event){
  	const pid = event.detail.pid
  }
  

数据传递

data属性

<view data-id="{{postId}}"></view>

命名规范：

​ -连接符

这样在dataset当中就会转换成小驼峰命名

• event当中

  • currentTarget绑定了对象
    • dataset当中有
      • id

• 传递数据在url后面添加

• 获取参数时，onLoad参数的option就会取出来参数

  • onload里面就有
    • id=？？

app.js

生命周期

• onLaunch
• onShow
• onHide
• onError

保存全局变量

App({
    onLaunch(){
        
    },
    test :1
})

//获取值
const app = getApp()
console.log(app.test)

小程序缓存

类似于localstorage

• 同步

  • wx.setStorageSync('key', data)

• 异步

  • wx.setStorage({
         data: data,
         key: 'key',
       })
    

wx.removeStorageSync("key")

wx.clearStorage()

• 读取缓存
  • wx.getStorageSync("key")

异步获取时

wx.setStorage({
      data: data,
      key: 'key',
    })
    
const falg = wx.getStorage({
	key:"flag",
	success(data){
		console.log(data.data)
	}
})

//当没有定义success时候，取值的返回值时promise

promise获取

• 传统

  • const falg = wx.getStorage({
    	key:"flag"
    })
    flag.then((value)=>{
    	console.log(value)
    })
    
    

• ES7

  • async onLoad(){
    	//要使用await的函数体前面+ async
    	const flag = await wx.getStorage({
    		key : 'flag'
    	})
    }
    

一组应用

  data: {
    _pid : null,
    _post_collected : {},
    is_collect : false
  },
  onLoad: function (options) {
    const collected = wx.getStorageSync('posts_collected')
    this.data._post_collected = collected //将目前storage中的内容给到data当中
    this.data._pid = options.pid
    const is_collect = collected[this.data._pid]
    this.setData({
      postData,
      is_collect
    })
  },
  onCollection(event){
    const postsCollected = this.data._post_collected
    this.setData({
      is_collect : !this.data.is_collect
    })
    postsCollected[this.data._pid] = this.data.is_collect
    wx.setStorageSync('posts_collected', postsCollected)
    console.log(wx.getStorageSync('posts_collected'))
  },

组件获取值

在组件当中定义一个properties属性，在调用组件时，直接给组件进行传参

tabBar

app.json

 "tabBar": {
    "selectedColor": "#333333",
    "color": "#999999",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "text": "阅读",
        "pagePath": "pages/posts/posts",
        "iconPath":"/images/tab/post.png",
        "selectedIconPath": "/images/tab/[e-mail]"
      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies",
        "iconPath":"/images/tab/movie.png",
        "selectedIconPath": "/images/tab/[e-mail]"
      }
    ]
  },

跳到带有tabBar选项卡的页面

  onTap: function(){
    wx.switchTab({
      url: '/pages/posts/posts',
    })
  },

this指针

this指针问题

     wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success(res){
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })
    //导致this指针不明确

使用箭头函数，使得success当中不存在this指针

     wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success:(res)=>{
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })

问题，解决方案

• wx.request无法访问https的页面
  • 解决方案：改用request后就可以使用了
• this指针问题
  • 存在有嵌套简单函数利用function语法this指针指向错误问题。再外部存储this指针后，再调用函数

总结

这次分给我的开发任务较少，主要任务集中在监督，管理上，上述技术详情有的并没有运用在我自己的开发当中，但本次项目必不可少。这次学到的微信小程序知识仍然停留在简单层面，还需要再往深处研究，才能更好的解决实战中的更多问题。