devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序入门+移动端框架入门+后台UI_vant webapp

作者：花生_TL007 | 2024-02-15 23:25:35

赞

踩

vant webapp

论文:     Log in to EasyChair for CCKS2022

业务分层/模块划分

路由设计   父子嵌套

数据管理

组件划分：划分的原则是什么

浏览器兼容性如何处理

代码规范：如何命名的    eslint,prettier规范代码风格并进行代码检测

性能优化如何做      懒加载

1.项目

1.移动：vue+element UI+vite        =>框架创建好项目后，需要什么样式就去UI组件找然后直接用，最多需要设置一下css

校园商城APP     外卖   或者商城

1.项目描述

2.涉及技术

本地存储  加密（验证身份与反编译）

支付功能（微信支付）   登录注册验证   安全    语音提醒  评价（涉及人工智能的评情感分析的评价）   模糊查询（防抖）   筛选   

2.小程序：vant-webapp   云开发

1.项目描述

一款基于vant的科研助手小程序，主要有专注时间控制功能及专注时长统计（番茄时钟）、博文管理功能（音频/视频/文本/图片的格式--------可以有AI中文本与语音的转化）、背景音乐的插入。其中有权限管理（不同用户之间的浏览与互动交流）、聊天管理、点赞、收藏、云存储的数据库管理、博文浏览的节流、博文分页展示、博文搜索的防抖

2.涉及技术

vant  云开发（inc原子操作，但当多个用户都点击时只处理一次的不足）   页面之间通信pubsub

防抖   节流    拍照上传API或者云函数中的wx.chooseImage和wx.cloud.uploadFile直接选择，不需要一个一个自己调用API写监听

3.后端：Ant Design - 一套企业级 UI 设计语言和 React 组件库  +react +webpack

1.项目描述

一个基于校园疫情期间物资调度系统/后台管理系统的页面，包含物资管理、调度管理、部门管理

2.涉及技术

GIT版本管理，react  基础框架，ant design UI库 ,axios HTTP 请求，图标字体Iconfont，图片格式base64，CSS预选择器less/sass，安全处理crsf/xss/https，数据mock，webpack打包，echarts绘图

2.简历

不编造，一般命名可以是：应聘+公司岗位+姓名+优势信息。

超级简历WonderCV - HR推荐简历模板,智能简历制作工具,专业中英文简历模板免费下载

个人技能

  • 掌握HTML5，CSS3，ES6，可快速搭建前端界面，并对浏览器渲染，性能优化有一定了解
  • 熟悉Vue技术栈(Vue3、vue-router、vuex、axios)，并有实际项目开发经验
  • 了解node.js，webpack，前端工程化
  • 了解Git协作开发，分支管理，版本管理，以及对前端代码规范和代码检测有一定了解
  • 熟练使用前端调试工具，快速定位前端问题
  • 阅读英文文档无障碍，善于外网翻阅资料，解决问题

项目经历

  • 项目描述：一个用于XXXXX的系统
  • 技术栈：vue3 vue-router vuex
  • 个人职责：负责
  • 时间
  • 价值/收获：写成了博客    放在了git上共享

教育背景

个人评价

事实证明自己沟通能力强、有耐心、专注力高......

自己做的项目   研究的项目

3.面试

  • HTML/CSS 常见的面试题：flex布局、盒子模型、BFC 重绘、重排、常见布局、HTML5、CSS3新特性等等
  • JS：数据类型、闭包、作用域、原型、原型链、数组常见操作、字符串常见操作、事件循环、深浅拷贝、事件代理、DOM、BOM操作、防抖节流、ES6相关的等等
  • Vue相关的：响应式、通信方式、生命周期、MVVM原理、虚拟dom、diff算法、key、插件、混入、指令、权限设计、Vue3新特性等
  • HTTP、Webpack、Node相关的问题
  • 性能优化，前端安全，算法（如果目标企业不是大厂，可以练习一些常用的算法，如排序，数组字符串的常用操作）

目录

一.新建小程序+vant使用

一官方文档：微信开放文档

1.新建项目

2.使用vant webapp组件

1.安装

2.将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 

3.在开发者工具中，工具----构建npm

勾上

4. 引入组件

5.使用组件

6.后续需要使用说什么组件，就在app.json中引入组件，然后在使用的地方使用就行

如果想要使用的图标在vant中找不到，可以在iconfont中进行寻找

二学习心得 ：vant+云开发+分页展示【从0开始做小程序】在线答题（3）渲染答题页面_哔哩哔哩_bilibili

三 微信小程序云开发基础到实战 微信小程序云开发基础到实战 云数据库 云函数 云存储 云调用【新视觉】_哔哩哔哩_bilibili

1.新建项目

2. 项目清理   置为空项目

3.创建云数据库

4.操作云数据库

5.watch方法

6.条件查询

7.command

8.云函数    相当于是小程序中的后端

 9云存储

二 移动端开发

1.vant框架

1.vite搭建----打包框架，像webpack：面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验     创建环境

2.  vant安装

3.使用

2.请求：通过封装axios实现请求模块的重用

tips:

1.在vscode中使得wxml高亮：安装  设置  ok

2.如果对静态页面进行单独的调试，不依赖于其他页面

 3.云开发：可以快速不要后端来获取用户的openId

4.小程序云开发安装vant

一.新建小程序+vant使用

一官方文档：微信开放文档

1.新建项目

2.使用vant webapp组件

  官方文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

1.安装

2.将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 

3.在开发者工具中，工具----构建npm

勾上

4. 引入组件

app.json中： "usingComponents": { "van-button": "@vant/weapp/button/index" }

5.使用组件

6.后续需要使用说什么组件，就在app.json中引入组件，然后在使用的地方使用就行

如果想要使用的图标在vant中找不到，可以在iconfont中进行寻找

二学习心得 ：vant+云开发+分页展示【从0开始做小程序】在线答题（3）渲染答题页面_哔哩哔哩_bilibili

1.整体上是微信小程序的创建+vant的引入

2.实现流程

先设计静态页面的框架

然后再找vant中的样式进行引入，完成静态的样式展示

然后将动态展示的内容写到js中，通过动态进行展示：这只是展示动态获取的数据，但没实现交互

进行交互：可以在wxml中使用wxs标签，相当于html中的js:在这里面写函数在当前页面需要的地方直接调用就行，之前的网易云音乐是通过bindtap进行于js中函数的绑定，两者目的一样

云开发需要在app.js中写上云环境

 3.内容学习

1.将元素上移：transforme:translateY(-20rpx);

2.对于img展示的图片，最好加上mode属性=aspectFill表示图片是等比例的放大

3.在代码中右击  格式化文档 可以对代码进行格式化

4.要创建一个内容管理系统，保存改项目的数据等信息

三 微信小程序云开发基础到实战 微信小程序云开发基础到实战 云数据库 云函数 云存储 云调用【新视觉】_哔哩哔哩_bilibili

1.新建项目

2. 项目清理   置为空项目

3.创建云数据库

4.操作云数据库

1.首先需要将 权限进行设置，以免不能正常CRUD

如果没有开启，在请求数据的时候是请求不到的，请求结果返回为空

2.查询数据库 

1.在页面上创建一个按钮，当点击的时候触发事件去查询数据库

2.查询数据库，当点击后进行展示数据库的内容   采用get进行查询结果的返回,换成count就是获取条目

 采用doc可以进行筛选：里面只能放id，只能基于id进行筛选

db.collection("lx_demo").doc("8f75309d627cb10502d85e8a399fa904").get({success:res=>{console.log(res)}})   //获取数据   查询操作

 展示到页面

 

  1. <!--index.wxml-->
  2. <button type="primary" bindtap="getData">获取</button>
  3. <!--当有1条数据时： <view>结果：{{obj.title}}</view> -->
  4. <!-- 当有多条数据时：  -->
  5. <view wx:for="{{obj}}">结果：{{item.city}}</view>
  6.  
  7. //index.js
  8.  
  9. data: {
  10.         obj: ""
  11.     },
  12.     getData() {
  13.         //console.log("您点击了按钮")
  14.         db.collection("sales").get({
  15.             success: res => {
  16.                 console.log(res)
  17.                 this.setData({ obj: res.data })
  18.             }
  19.         })   //获取数据   查询操作
  20.         // db.collection("lx_demo").doc("8f75309d627cb10502d85e8a399fa904").get({
  21.         //     success: res => {
  22.         //         console.log(res)
  23.         //         this.setData({ obj: res.data })
  24.         //     }
  25.         // })   //获取数据   查询操作
  26.  
  27.     },

3.查询数据库进阶

为了避免回调地狱问题（一直查询一直回调。一旦出错会很麻烦的)，因此ES6提出了promise进行解决。 

  1. getData() {
  2.         db.collection("sales").get().then(res => {
  3.                 console.log(res)
  4.                 this.setData({ obj: res.data })
  5.             }
  6.         )  //如果还需要继续查询，直接链式调用.then就可以。then 中是成功的结果   .catch是失败的结果

 where查询指令:可以传入对象，比如取符合条件 值=几 的结果

 4.数据库插入操作

1.写死的数据进行提交

2.通过表单动态插入

  1. <button type="primary" bindtap="addData">插入数据</button>
  2. ------- 
  3. <form bindsubmit="tosubmit">
  4. <input name="title" placeholder="请输入标题内容"></input>
  5. <button type="primary" form-type="submit">提交插入数据</button>
  6. <view>--- </view>
  7. <button type="primary" form-type="reset">重置</button>
  8. </form>
  9.  
  10.  
  11.  
  12.   //插入数据
  13.     tosubmit(res){
  14.         var rr=res.detail.value.title
  15.         var ob=res.detail.value
  16.         var {title}=res.detail.value   //rr和title是相等的，title这种方法应用了es6的解构
  17.         db.collection("lx_demo").add({
  18.             //data:{title:rr}
  19.             //data:{title:title}
  20.             data:ob
  21.         }).then(res=>{console.log(res)})
  22.     },
  23.     addData(){
  24.         wx.showLoading({
  25.           title: '加载中',
  26.           mask:true
  27.         })
  28.         db.collection("lx_demo").add({
  29.             data:{title:"测试数据——插入操作"}
  30.         }).then(res=>{console.log(res)})
  31.  
  32.     },

 5.更新数据库操作    update和set两种方法：update更新指定的，set只保留更新的字段，其他的都会删除

数据更新中，需要有筛选条件，指定要修改哪一条

1.doc更新id为 8f75309d627cdbe302ee79a1709729a6的，

 2.采用where进行更新

在小程序中不可以使用where，只能使用id进行修改；在云函数中是可以的，后续讲

  1. <button type="primary" bindtap="upData">修改数据</button>
  2.  
  3.  
  4. //修改数据
  5.     upData() {
  6.         //update：更新data中指定的字段    如果是set就是更新指定字段并删除其他字段
  7.         db.collection("lx_demo").doc("8f75309d627cdbe302ee79a1709729a6").update({
  8.             data: {
  9.                 title: "已修改"
  10.                 //newpro:"新增的"   可以新增一些内容/字段
  11.             }
  12.         }).then(res => {
  13.             console.log(res)
  14.         })
  15.     },

6.删除数据库  只能通过id删除

  1.  <input placeholder="请输入删除的id" bindinput="del"></input>
  2. <button type="primary" bindtap="delData">删除数据</button>
  3.  
  4. //删除数据
  5.     del(res) {
  6.         var hh=res.detail.value
  7.         delId = hh
  8.         console.log("获取到的数据为111：", delId)
  9.         
  10.     },
  11.     delData() {
  12.         //写死id  db.collection("lx_demo").doc("8f75309d627cdbe302ee79a1709729a6").remove().then(res => { console.log(res) })
  13.         //动态获取id
  14.         console.log("获取到的数据为：", delId)
  15.         db.collection("lx_demo").doc(delId).remove().then(res => { console.log(res) })
  16.  
  17.     },
  18.  
  19.     /**
  20.      * 生命周期函数--监听页面加载
  21.      */
  22.     onLoad: function (options) {
  23.  
  24.     },

注意：如果是控制台添加的就删不掉，只能删除用户自己插入的

5.watch方法

可以监听数据的变化，在结果中可以看出变化的数据和最终的数据，有两个回调的方法onchange和onerror。作用就是可以将变化后的数据重新渲染，这样便于数据更新后展示给用户。

6.条件查询

limit  orderby  skip是用于分页，过滤掉几条

7.command

1.比较操作符：还有neq lt lte gt gte in nin等等

  1. <!--pages/commond/commond.wxml-->
  2. <van-button type="primary" bindtap="getData"> command查询</van-button>
  3. <view wx:for="{{dataLIst}}"  wx:key="index">{{item.title}}</view>
  4.  
  5.  
  6. const db = wx.cloud.database()
  7. const _ = db.command
  8. Page({
  9.     data: {
  10.         dataLIst: ""
  11.     },
  12.     getData() {
  13.         db.collection("lx_demo").where({
  14.             title:_.eq("这是测试创建云数据库中列表")  //表示查询：还有neq lt lte gt gte in nin等等
  15.         }).get().then(res => { this.setData({ dataLIst: res.data }) })
  16.  
  17.     },

2.逻辑操作符

and(条件1 ，条件2) 与 get(条件1).and(条件2)等价、or() 、not(）、nor()；其中条件可以是传入对象

3.字段操作符

exist（true） 、mod()

4.数组操作符，对于字段为数组类型的

size(长度，参数为number)、all(参数是数组，所需字段中包含改数组中的东西就是满足条件的)、

elementMatch(是一个对象，找出数组中满足对象条件的)

push，插入的时候也可以传入要插入的位置的索引  pop  shift unshift  pull()是移除传入的元素  pullAll   addToSet

5.更新字段数据

inc（）是进行自增，参数是自增的长度，可以为负值；

remove()是删除字段，不是清空是删除掉

8.云函数    相当于是小程序中的后端

1.基础

1.新建云函数getData ，创建好后在后台可以看到   云函数相当于是对一些函数的封装   

【请求云函数————>云函数请求数据库，这样实现了前后端的分离，前端只负责逻辑就行了。数据后端处理】

 2.上传并部署

 3.创建：上传并部署可以只更新云函数中修改后的文件

 4.向云函数传参

  1.  //云端
  2. // 云函数入口文件
  3. const cloud = require('wx-server-sdk')
  4.  
  5. cloud.init()
  6. const db=cloud.database();  //一定要写在上一行init的后面
  7.  
  8. // 云函数入口函数
  9. exports.main = async (event, context) => {
  10.     //接收参数
  11.      event.name
  12.      event.age
  13.     return await db.collection("lx_demo").get()  //等待异步请求返回
  14. } 
  15.  
  16.  
  17.  
  18.  
  19.  
  20. //本地
  21.  
  22. onLoad(options) {
  23.         wx.cloud.callFunction({
  24.             name:"getData",  //云函数的名称
  25.  
  26.             //向云函数传递数据
  27.             data:{
  28.                 name:"张三",
  29.                 age:18
  30.  
  31.             }
  32.         }).then(res=>{
  33.            console.log(res)
  34.         }) 
  35.  
  36.     },

 9云存储

1.上传下载文件到云端，可以实现数据的上传

四 uniapp框架进行小程序的开发

1.下载Hbuilder X 可以直接创建uniapp项目

2.项目

1.首先明白功能，设计好每一个静态页面，然后对页面中的组件进行拆分

2.实现页面之间的跳转

3.实现数据的交互

二 移动端开发

1.vant框架

1.vite搭建----打包框架，像webpack：面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验     创建环境

2.  vant安装

通过npm

3.使用

官方文档有

eg:vant有移动端rem适配处理[px------rem],安装与导入就可以使用这些功能

      postCSS进行样式CSS的处理：相关配置

2.请求：通过封装axios实现请求模块的重用

将请求封装到一个js文件中，作为工具类

1.导入axios模块;

创建axios实例：通过create方法，传入baseurl;

最后将模块导出      后续还有拦截器之类的

tips:

1.在vscode中使得wxml高亮：安装  设置  ok

2.如果对静态页面进行单独的调试，不依赖于其他页面

可以在app.json中将pages中的所要调试的页面放在第一个

也可以通过删除 项目文件project.private.config.json中list字段的内容并且添加新的编译模式，将该页作为单独的页面进行调试

 3.云开发：可以快速不要后端来获取用户的openId

需要使用appid，不能是测试的id    需要真实开发人员的

在app.js中配置

 微信小程序云开发基础到实战 云数据库 云函数 云存储 云调用【新视觉】_哔哩哔哩_bilibili

4.小程序云开发安装vant

1.通过以下操作进入后端，输入命令 npm init  -y生成自定义 package.json 文件

2.下载vant依赖

npm i @vant/weapp -S --production

3.将 app.json 中的 "style": "v2" 去除

小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

4.修改package.config.json中的两个字段如下

  1.    "packNpmManually": true,
  2.     "packNpmRelationList": [
  3.       {
  4.         "packageJsonPath": "./miniprogram/package.json",
  5.         "miniprogramNpmDistDir": "./miniprogram/"
  6.       }
  7.     ],

5.选择工具---构建npm进行构建

6.使用

在app.json中引入

  1. 比如使用按钮
  2.  
  3. 在app.json中：
  4. "usingComponents": {
  5.   "van-button": "@vant/weapp/button/index"
  6.  
  7. 在wxml中
  8. <van-button type="primary">按钮</van-button>

 结果

-------------------------------------------------------

1.直播深拷贝

unction cloneDeep(obj) {
var newobj = obj instanceof Array ? [] : {}
for (var k in obj) {
if (typeof obj[k] === 'object') {
newobj[k] = cloneDeep(obj[k])
} else {
newobj[k] = obj[k]
}
}
return newobj
}
 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/88174
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号