weixin_44867717的博客

小程序ui组件Color UI快速入门什么是ColorUIColorUI是UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互，样式更加华丽精美，使用方法简单，只需将ColorUI的代码片段复制到你的小程序中即可，还方便自己定制。官网相对于其他框架，有文档，该组件库没有文档说明，使用什么直接在demo里粘贴就好了，附送下载链接官方网站：https://www.color-ui.com/GitHub：https://github.com/weilanwl/Co

个人中心——open-data标签 渲染页面布局用户头像和昵称我的信息列表我的订单管理收货地址获取头像和昵称<open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>实例open-data-用户中心——https://developers.weixin.qq.com/miniprogram/dev/component/o

支付-删除已经支付的商品并跳转回购物车页面——wx.requestPayment()-发起微信支付 & wx.switchTab()-跳转到 tabBar 页面 & wx.setStorageSync()-本地缓存调用后台接口（我们自己平台的接口记录支付的交易数据）request('my/orders/req_unifiedorder', 'post', { order_number: this.orderNum}, { Authorization: token}).th

商品总价与支付菜单布局——计算属性-计算选中商品的总价商品总价与支付菜单 <!-- 商品总价和支付按钮 --> <div class="all-price"> 合计：<span>￥{{calcTotal}}</span> <button type="primary" @click='handlePay'>支付</button> </div> </div&gt

订单布局——onLoad()加载时，商品列表页面结算跳转-过滤商品列表 & 订单界面只展示选中商品遍历订单列表数据<div class="list-title">商品列表</div><div class="ware-list"> <div class="ware-item" > <!-- 左侧的图片 --> <navigator class="ware-image" url="#"> &

跳转到订单确认页面第一步：在pages文件夹下新建文件夹订单order文件夹新建入口文件main.jsimport Vue from 'vue'import App from './index'const app = new Vue(App)app.$mount()购物车跳转方式 // 调用接口生成订单 request('my/orders/create', param, 'post', { Authorization: token }

创建订单——wx.request()-发起 HTTPS 网络请求 & request.js文件中增加header参数wx.request()-发起 HTTPS 网络请求——https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html调用接口第一步：引用请求方法import request from '../../utils/request.js'第二步：增加utils/reques

用户登录授权——wx.login()-调用接口获取登录凭证（code） & wx.navigateBack()-返回上一页面或多级页面 & POST请求-增加封装接口文件request.js中的method方法用户授权wx.login()-调用接口获取登录凭证（code）——https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html微信登录信息结构 <div>

去结算——没有登录-提示-跳转授权登录页面 & wx.showToast()-消息提示 & 已经登录-创建订单 & 路由跳转-wx.navigateTo()如果没有选择商品，就提示用户选择商品// 判断用户是否选择了要购买的商品let isSelected = this.orderGoods().length === 0if (isSelected) { // 用户没有选中商品，给一个提示并且终止提交订单 mpvue.showToast({ title

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法通过计算属性计算商品总价allPrice() { // 计算购物车所有商品的总价格 // 单价 X 数量 再进行累加操作 let sum = 0 //计算总价 for(let key in this.cart) { let p = this.cart[key] if(p.checked) { // 选中的商品 // 单价 X 数量

历史关键字渲染——搜索历史关键字缓存 & @confirm=‘toSearch’-enter键回车监控 & unshift()方法-将新项添加到数组起始位置 & push()方法-向数组的末尾添加元素缓存关键字-实例给输入框绑定回车监控事件<!-- 输入框 --> <div class="search-input"> <icon type='search' size='16'/> &lt

关键字防抖效果——接口调用时进行防抖处理 & 函数防抖：特定时间内，限制发送请求的频率 & 应用场景-表单验证和关键字搜索函数防抖：限制发送请求的频率现象：每输入一次，就请求一次接口；频繁请求，降低性能防止发送请求的频率handleInput() { // 定时任务在延时时间范围内，如果被销毁，那么就不会再出发 // 函数防抖debounce：在指定时间内没有触发特定条件（输入框字符变化），那么就执行一次任务（发送一次请求） clearTimeout(thi

实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失搜索条效果<div class="search-input"> <icon type='search' size='16'/> <input placeholder="请输入关键字" /></div><button class="cancel">取消</button>搜索结果列表<div class="s

实现左侧菜单切换——计算属性computed的数据结果，依赖于data中的数据，data中的数据变化，计算属性中的数据会同步进行相应变化左侧菜单绑定事件控制右侧内容变化changeBrand (index) { // 切换右侧商标 this.currentIndex = index}实例：绑定左侧一级菜单的结构，绑到父级上 @click='handleChange',同时id也添加动态绑定 :data-id='item.cat_id' <!-- 左侧一级分类 --&gt

右侧商标渲染——填充分类模板右侧数据-通过computed计算属性，处理二级和三级菜单数据 & 短路运算，节省处理器的运算时间 & 具有嵌套关系的遍历，:key不能写同样的index等命名，否则会报错右侧内容布局右侧数据填充<div class="right"> <!-- 右侧分类信息 --> <div :key='item.cat_id' v-for='item in rightData' class="brand-item">

分类数据加载调用后台接口获取分类数据接口路径：categoriesasync cateData () { // 调用接口获取分类数据 let ret = await request('categories') this.cate = ret.data.message}补充：在src下pages同层级的utils文件夹下，封装请求方法的文件request.js文件如下/* 封装通用的后台接口调用方法*/export default (path, param) =&

商品分类顶部搜索栏公共组件封装<div class="search"> <div class="search-item"> <icon type='search'/> <span>搜索</span> </div></div> // 导入组件 import SearchBar from '../../components/searchbar' // 配置

项目开发基础——项目开发流程、项目团队组成和项目技术选型项目开发流程全新的项目创业公司公司新的业务线既有的项目已经上线，需要修改一些bug已经上线，需要做二期新的需求已经有的项目需要重构代码优化：vue–>vue不同技术架构的重构：jquery–>vue项目类型公司自有的项目（一般要求比较严格）外派项目：公司的产品卖给银行：需要进行需求定制（驻场开发）外包项目：派到别的公司干活（接触到的项目类型和技术选型可能多一些）立项->需求分析

wxs基本用法一般可以使用wxs脚本实现数据的简单格式化操作（本质上就是在模板中使用脚本语言）标签需要添加模块名称 module模块导出的成员必须通过模块名称访问 m1.formatData()<view>{{m1.formatData(book)}}</view><wxs module='m1'> // 格式化数据 function formatData(book) { return '《' + book + '》' } modul

小程序项目-颜值检测——基础布局、选择图片操作、上传图片到AI接口进行检测、检测结果数据展示、小程序分享窗口定制步骤获取图片的信息（上一步选择的图片）调用文件上传微信API把图片上传到AI接口AI接口会在后台检测颜值信息，然后返回小程序接收到结果之后显示到页面wx.uploadFile()url 图片上传地址filePath 本地图片的路径name 提供给服务器的图片的获取名称success 上传成功的回调函数result.data.face[0] 表示服务

补充——接口调用几种方式、域名配置、前端的权限控制、跨域的解决方案接口调用原生Ajax基于jQuery的接口调用 $.ajaxaxiosfetch api (原生ajax的升级版)小程序中的接口调用专门提供了一个方法 wx.request域名配置小程序调用的后台接口中域名需要授权才可以开发阶段可以忽略权限校验上线阶段必须在小程序管理后台进行页面的授权域名访问使用的协议必须是https协议前端的权限控制基于token的登录方案通过axios的请求拦截器统一添加

小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法小程序默认提供的组件（内置组件）如果内置组件没有提供特定功能，我们可以自己实现一个组件来完成自己的一些需求基本用法创建组件组件的json配置文件必须添加属性"component": true实现组件模板和样式使用自定义组件（在使用自定义组件的页面中添加如下配置）{ "usingComponents": { "my-he

小程序项目之猫眼案例-源码小程序页面结构<!-- 简介 --><view class="detail"> <!-- 背景滤镜 --> <div class="filter" style="background-image: url(https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg)"></div> <view class="wrap"> <

小程序项目之猫眼案例——下拉刷新、触底加载更多数据（分页）、Tab切换效果、Tab列表动态渲染、加载提示功能、完善加载更多功能需求分析实现选项卡的切换列表数据的动态加载下拉刷新触底加载下拉刷新全局下拉刷新与局部下拉刷新下拉刷新时要调用接口，重新获取最新数据，渲染页面 // 如果是全局配置app.json，需要在window的子属性配置 enablePullDownRefresh // 这样配置，所有的页面都支持下拉动作 "window": { "navigatio

微信小程序API详解小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。根据api的名称大体可以分为如下三类事件监听 API同步 API异步 API微信API基本使用界面API：加载提示wx.showLoadingwx.hideLoadingwx.showToastwx.hideToast调用后台接口测试接口wx.requestwx.request({ url: 'http://loc

JS交互逻辑详解——data数据变更时同步（setData 函数） & 视图层更新是异步js和wxml交互流程分析js与模板是如何交互的？App() 该函数是微信小程序api的一部分，App名称是固定的getApp() 作用：在子页面中使用全局实例对象中的数据和方法不可以显示的调用全局生命周期函数但是可以直接操作自定义的数据或者函数这app.js中通过this的方式获取小程序实例Page() 该函数是微信小程序api的一部分，Page名称是固定的

js交互相关代码分析、小程序的生命周期、动态模板语法详解和表单 & 前端模块化 & DOM的重排、重绘回顾js交互相关代码分析app.js 全局入口JS全局生命周期函数全局数据page.js 页面JS页面生命周期函数页面的数据事件处理函数utils.js 通用js模块通用的一些工具函数小程序的生命周期全局生命周期页面生命周期应用场景调用后台的接口启动/销毁定时任务获取场景值动态模板语法详解数据绑定

案例Tab案例基本布局<!-- Tab案例实践 --><view class='tab'> <view class='title'> <view class='tab-title'>js高程</view> <view class='tab-title'>明朝那些事</view> <view class='tab-title'>浪潮之巅</view> <

表单操作forminputcheckboxradiotextarea表单提交数据的方式：表单条目需要提供name属性提交按钮需要提供属性form-type=‘submit’form组件需要提供属性bindsubmit=事件处理函数 handleSubmit: function(e) { // 处理表单提交 // console.log('form') var uname = e.detail.value.uname console.log(un

事件处理事件的绑定方式：bind:【事件名称】、事件函数如何处理:需要在js文件中进行定义<view bindtap='handleTap'>点击</view>// js交互逻辑handleTap () { // console.log('tap') // 事件处理函数中修改data中的数据 // 小程序中不可以这样修改数据 this.msg = 'nihao' // 修改数据必须使用setData方法进行 // 事件函数中

模板template用法 和数据传递应用场景：重复性的内容可以抽取到模板中定义模板：数据是使用模板的时候传递过来的，而不是直接从js文件中传递过来的需要提供name属性<template name='fruitList'> <view>水果列表</view> <view wx:key='{{item.id}}' wx:for='{{fruits}}'> {{index}}----{{item.ename}}---{{ite

列表渲染wx:forwx:key<!-- 默认item表示其中一项数据 --><!-- 默认index表示数据项的索引 --><view wx:key='{{index}}' wx:for='{{list}}'> {{index}} {{item}}</view>wx:for-index 给索引起一个别名wx:for-item 给数据项起一个别名注：如果修改默认名称原来的名称就不可以使用了<view wx:for

条件渲染wx:ifwx:elsewx:elifwx:else<view wx:if='{{score>=90}}'>优秀</view><view wx:elif='{{score<90&&score>=80}}'>良好</view><view wx:elif='{{score<80&&score>=60}}'>一般</view><

WXML模板语法详解常用内置组件数据绑定条件渲染列表渲染事件处理模板用法数据绑定基本数据绑定组件属性绑定：插值表达式的信息可以插入到属性中注：自定义属性要加上data-,如：data-abc="123"动态绑定id，如下：插值表达式内部支持计算对象操作：访问对象中的属性值（对象名称.属性名称）对象操作：访问对象中的属性值（对象名称.属性名称）...

小程序生命周期全局生命周期onLaunch 小程序初始化完成时（全局只触发一次）onShow 小程序启动，或从后台进入前台显示时onHide 小程序从前台进入后台时onError 小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息页面生命周期onLoad 页面加载时触发onShow 页面显示/切入前台时触发。onReady 页面初次渲染完成时触发。onHide 页面隐藏/切入后台时触发（点击关闭按钮）onUnload 页面回退时触发（点击回退按钮）

JS交互逻辑在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作app.js中最外层需要App({}) ，该函数是微信平台提供的apiApp({ // 全局数据，可以在所有的子页面中使用 mydata: { n: 100 }})// 页面获取全局数据的方式,app表示小程序的实例对象const app = getApp()page.js中最外层需要Page({})，该函数是微信平台提供的apiPage({ // 页面数据，用于提供给页面的模板

小程序单页面demo-PC乐园案例根据效果图实现静态页面效果初步体会基于微信的页面开发模式第一步：在pages文件夹下，新建目录leyuan,并在其下面新建Page，生成如下目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81ihm0aP-1602664820222)(C:\Users\Administrator\Desktop\csdn\小程序\image\demo实例目录.jpg)]第二步：在leyuan/index.wxml中结构：<!--

小程序相关配置——全局配置和页面配置 & 小程序开发框架概览——wxml（模板）、内置组件的用法和wxss（样式）-单位rpx小程序相关配置全局配置（app.json）window 配置顶部导航栏相关信息pages 用于配置小程序所有页面的路径第一个路径表示默认打开页面的路径tabBarlist 配置页面底部菜单数据（2-5个菜单）pagePath 页面的路径text 菜单的名称iconPath 默认图标的路径selectedIconPath 选中图标的

开发小程序准备工作——注册小程序账号 & 下载并安装小程序开发工具 & 小程序之HelloWorld开发小程序准备工作注册小程序账号下载并安装小程序开发工具注册小程序账号进入官网点击【立即注册】，选择小程序订阅号服务号小程序企业微信进入注册页面邮箱（邮箱必须是没有用过的）密码验证码通过邮箱激活账号完善账号信息姓名身份证号手机号进入小程序管理后台设置小程序名称、头像等信息APPID：wxb5f8e13cdffc3d4f下载

大纲微信开发概述微信开放平台微信公众号类型小程序发展历程小程序应用场景开发小程序准备工作注册小程序账号小程序开发工具下载与安装小程序开发工具基本使用小程序项目结构分析小程序开发快速体验模板样式交互小程序常用内置组件小程序案例微信开发概述微信开放平台微信公众平台微信公众号类型服务号：给企业和组织提供更强大的业务服务和用户管理能力，帮助企业快速实现全新的公众号服务平台。订阅号：为媒体和个人提供一种新的信息传播方式，构建与读者之间更好的沟通与