微信小程序个人技术总结

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

技术概述

微信小程序是类似于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/post@highlight.png"
      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies",
        "iconPath":"/images/tab/movie.png",
        "selectedIconPath": "/images/tab/movie@highlight.png"
      }
    ]
  },

跳到带有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指针后，再调用函数

总结

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

posted @ 2021-06-28 10:36 丫比是丫比阅读(449) 评论(5) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

丫比是丫比

有1🐎