学习微信小程序

微信小程序学习（1）

微信小程序学习（2）

文章目录

学习微信小程序
- - 注册和初始化
  - 小程序配置
  - tabbar导航栏
  - 模板插样与WXML
  - 循环渲染
  - 条件渲染
  - 模板
  - 微信小程序脚本WXS
  - - module
    - require
    - src
    - demo
  - 微信小程序常用组件
  - 事件
  - - 绑定并阻止事件冒泡
    - 互斥事件绑定
    - 事件的捕获阶段
  - API
  - 请求数据
- 小程序项目-商城
- - 初始化
  - - 引入vant
    - 使用组件
    - 下面引入一个Skeleton 骨架屏
    - 小程序的屏幕像素
    - 设置一个自定义navbar
    - 图片轮播
    - 图标列表使用Grid宫格
    - 滚动view和底部栏
    - 列表与下拉刷新
    - 新页面分类
    - 进入产品页面
    - - 页面详情
      - 商品规格
      - 商品评论
    - 加购与购物车页面模拟
    - 模拟个人中心

注册和初始化

https://mp.weixin.qq.com/

账号用的网易的163邮箱，首字母小写缩写+手机号作为账号（以防忘掉）

开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

下载后根据在平台中生成的AppID就可以创建小程序项目了，这里选择js非云开发

utils是工具函数

app.js是我们的应用以及项目编写的入口实例

app.json是我们的路由和窗体样式相关的配置

app.wxss是布局样式文件

project.config.json是项目的配置文件

sitemap.json是微信小程序的索引相关

index和logs是两个页面，每个页面的组成形式大致是固定的

形式和全局类似

wxml是模板引擎，wxss是布局样式，json是窗体配置，js是生命周期方法和数据绑定

小程序配置

新建页面很简单，在pages下面可以新建一个文件夹about然后右击新加page，可以直接生成四个空白page相关的文件

由于还没有做路由跳转所以直接在app.json中修改了路由的优先级把about放到最前面

window下面依次是背景文字样式、导航条的背景颜色、导航条内文字、导航条文字颜色

全局配置指南https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

也可以在page中的.json中自定义配置

tabbar导航栏

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

logo用的是随便找的之前练习用的小米的，然后如果是活跃状态就会显示小米图标，非活跃就是home图标，此处只是为了练习效果

模板插样与WXML

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

https://developers.weixin.qq.com/miniprogram/dev/component/

小程序标签	说明
视图容器
view	视图容器，类比div
scroll-view	可滚动视图容器
swiper	可滑动的视频容器
基础内容
icon	图标
text	文字，类比span
progress	进度条
表单组件
button	按钮
form	表单
input	输入框
checkbox	多项选择器
radio	单项选择器
picker	列表选择器
slider	滑动选择器
switch	开关选择器
label	标签
操作反馈组件
action-sheet	上拉菜单
modal	模态弹框
progress	进度条
toast	短通知
导航
navigator	应用内跳转
多媒体
audio	音频
image	图片
video	视频
地图
map	地图
画布
canvas	画布

想使用模板引擎，就是js中的data能够放到wxml显示

然后是对于image的src的模板引擎插入，会拿双引号括起来

<image src="{{imgUrl}}" ></image>

设置了一个3s后切换源的事件，可以搞定

data: {msg: 'wxml,hello',imgUrl: '/images/mi-home.png',},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {setTimeout(() => {this.setData({imgUrl: '/images/mi-logo.png',})}, 3000)},

甚至可以直接用js语句操作

也就是{{}}内部是可以直接引用js代码和data数据的，并且可以直接在双引号中和字符串拼接

循环的方式

循环渲染

<!-- 循环数组 -->
<view wx:for="{{array}}" wx:key="index">{{item}}
</view>
<!-- 循环对象 -->
<view wx:for="{{obj}}" wx:key="index" wx:for-item="obj_item" wx:for-index="obj_name">{{obj_name}}:{{obj_item}}
</view>

条件渲染

<!-- 循环对象 -->
<view wx:for="{{obj}}" wx:key="index" wx:for-item="obj_item" wx:for-index="obj_index">
<!-- 条件渲染 --><view wx:if="{{obj_item.isvalid===1}}">{{obj_index}}:{{obj_item.name}}</view><view wx:elif="{{obj_item.isvalid===0}}">{{obj_index}}:{{obj_item.name}}:废弃</view><view wx:else>{{obj_index}}:{{"xxx"}}:废弃</view>
<!--  -->
</view>

    obj:[{name:'obj1',age:'1',isvalid:1},{name:'obj2',age:'2',isvalid:-1},{name:'obj3',age:'3',isvalid:1},{name:'obj4',age:'3',isvalid:0},]

模板

<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template><template is="staffName" data="{{...staffs.staffA}}"></template>
<template is="staffName" data="{{...staffs.staffB}}"></template>
<template is="staffName" data="{{...staffs.staffC}}"></template>

    staffs: {staffA: { firstName: 'Hulk', lastName: 'Hu' },staffB: { firstName: 'Shang', lastName: 'You' },staffC: { firstName: 'Gideon', lastName: 'Lin' }},

微信小程序脚本WXS

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

语法暂时不支持es6

WXS 代码可以编写在 wxml 文件中的 `` 标签内，或以 .wxs 为后缀名的文件内。

每一个 .wxs 文件和 `` 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

module

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

// /pages/comm.wxsvar foo = "'hello world' from comm.wxs";
var bar = function(d) {return d;
}
module.exports = {foo: foo,bar: bar
};

上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件或 WXML 中的 <wxs> 标签引用。

// /pages/tools.wxsvar foo = "'hello world' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml --><wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

require

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

// /pages/logic.wxsvar tools = require("./tools.wxs");console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

src

src 属性可以用来引用其他的 wxs 文件模块。

引用的时候，要注意如下几点：

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

demo

wxs肯定不支持es6，要小心

wxs只支持wxml的wxs标签和wxs的require的两种引用

<!--pages/wxs/wxs.wxml-->
<view>
1-价格：{{setobj.setPrice()}}
2-价格：{{setobj2.setPrice()}}
3-价格：{{setobjx}}
</view>
<wxs module="setobj2" src="./wxs.wxs"/>
<wxs module="setobj">
var price=10;
var setPrice=function(){return price+'￥'
}
module.exports={setPrice:setPrice
}
</wxs>

//./wxs.wxs
var price=10;
var setPrice=function(){return price+'$'
}
module.exports={setPrice:setPrice
}

//./wxs2.js
let price=10;
let setPrice=()=>{return price+'$'
}
module.exports={setPrice
}

//./wxs.js
onLoad: function (options) {let wxjs = require("./wx2")let setobj = wxjs.setPrice()console.log(wxjs, wxjs.setPrice())this.setData({setobjx: wxjs.setPrice()})},

然后就是这里面的js是支持module和require的，也可以考虑把数据和方法都用js定义好然后引入到page.js中

这时候如果命名相同，wxs的引入比js的data的优先级要高

微信小程序常用组件

https://developers.weixin.qq.com/miniprogram/dev/component/

组件和标签可以自行查看实例然后自己用逻辑实现，很多都已经封装好了

事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view>
</view>

互斥事件绑定

还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">outer view<view id="middle" bindtap="handleTap2">middle view<view id="inner" mut-bind:tap="handleTap3">inner view</view></view>
</view>

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view>
</view>

BaseEvent 基础事件对象属性列表：

属性	类型	说明	基础库版本
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
mark	Object	事件标记数据	2.7.1

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

属性	类型	说明
detail	Object	额外的信息

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

API

https://developers.weixin.qq.com/miniprogram/dev/api/

api挺多的随用随查吧

基础
- wx.canIUse
- wx.base64ToArrayBuffer
- wx.arrayBufferToBase64
- 系统
- 更新
- 小程序
- 调试
- 定时器
- 环境变量
路由
- wx.switchTab
- wx.reLaunch
- wx.redirectTo
- wx.navigateTo
- wx.navigateBack
- EventChannel
界面
- 交互
- 导航栏
- 背景
- Tab Bar
- 字体
- 下拉刷新
- 滚动
- 动画
- 置顶
- 自定义组件
- 菜单
- 窗口
- 键盘
网络
- 发起请求
- 下载
- 上传
- WebSocket
- mDNS
- UDP 通信
数据缓存
- wx.setStorageSync
- wx.setStorage
- wx.removeStorageSync
- wx.removeStorage
- wx.getStorageSync
- wx.getStorageInfoSync
- wx.getStorageInfo
- wx.getStorage
- wx.clearStorageSync
- wx.clearStorage
- 周期性更新
媒体
- 地图
- 图片
- 视频
- 音频
- 背景音频
- 实时音视频
- 录音
- 相机
- 富文本
- 音视频合成
- 实时语音
- 画面录制器
- 视频解码器
位置
- wx.stopLocationUpdate
- wx.startLocationUpdateBackground
- wx.startLocationUpdate
- wx.openLocation
- wx.onLocationChange
- wx.offLocationChange
- wx.getLocation
- wx.chooseLocation
转发
- wx.updateShareMenu
- wx.showShareMenu
- wx.hideShareMenu
- wx.getShareInfo
画布
- wx.createOffscreenCanvas
- wx.createCanvasContext
- wx.canvasToTempFilePath
- wx.canvasPutImageData
- wx.canvasGetImageData
- Canvas
- CanvasContext
- CanvasGradient
- Color
- Image
- ImageData
- OffscreenCanvas
- Path2D
- RenderingContext
文件
- wx.saveFileToDisk
- wx.saveFile
- wx.removeSavedFile
- wx.openDocument
- wx.getSavedFileList
- wx.getSavedFileInfo
- wx.getFileSystemManager
- wx.getFileInfo
- FileSystemManager
- Stats
开放接口
- 登录
- 小程序跳转
- 帐号信息
- 用户信息
- 数据上报
- 数据分析
- 支付
- 授权
- 设置
- 收货地址
- 卡券
- 发票
- 生物认证
- 微信运动
- 性能
- 订阅消息
- 微信红包
设备
- 外围设备
- iBeacon
- NFC
- Wi-Fi
- 低功耗蓝牙
- 联系人
- 蓝牙
- 电量
- 剪贴板
- 网络
- 屏幕
- 电话
- 加速计
- 罗盘
- 设备方向
- 陀螺仪
- 性能
- 扫码
- 振动
Worker
- wx.createWorker
- Worker
  - Worker.onMessage
  - Worker.postMessage
  - Worker.terminate
第三方平台
- wx.getExtConfigSync
- wx.getExtConfig
WXML
- wx.createSelectorQuery
- wx.createIntersectionObserver
- IntersectionObserver
- MediaQueryObserver
- NodesRef
- SelectorQuery
广告
- wx.createInterstitialAd
- InterstitialAd

请求数据

拿fastmock模拟了一个数据接口

https://www.fastmock.site/mock/321eff979384ff4bf180c470f5c3c650/demo/api/:id

设置关闭域名校验

<form bindsubmit="search">
<input name="_id" placeholder="输入一个id"></input>
<button form-type="submit">搜索</button>
</form>
<view wx:if="{{list}}">
{{id}}
</view>
<view wx:for="{{list}}" wx:key="index">
{{item.name}}:{{(item.price)}}
</view>

  search(e){console.log(e.detail.value)let _id=e.detail.value._idwx.request({url: 'https://www.fastmock.site/mock/321eff979384ff4bf180c470f5c3c650/demo/api/'+_id,success:(res)=>{console.log('箭头函数拿到全局this',this)console.log(res.data)let list=res.data.data.listlist=list.map(item=>{let price=+(item.price).toFixed(2)item.price=pricereturn item})this.setData({list:list,id:_id})}})},

小程序项目-商城

自定义组件介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

使用第三方ui vant-weapp

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

初始化

先新建一个项目lcmall，目录结构：

引入vant

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

yarn add @vant/weapp --production

然后菜单栏-工具-构建npm

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

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/lib/button/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

下面引入一个Skeleton 骨架屏

第一步删掉app.wxss中的默认布局

第二步引入app.json

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"sitemapLocation": "sitemap.json","usingComponents": {"van-skeleton": "@vant/weapp/skeleton/index"}
}

第三步把

微信小程序学习（1）-基础开发相关推荐

微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
小程序获取头像试试水 02《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
小程序的 HelloWord 01《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习（2）-云开发
微信小程序-云开发微信小程序学习(1) 微信小程序学习(2) 文章目录微信小程序-云开发初始化+云函数的坑云函数使用老陈段子小程序云存储小程序云数据库初始化插入简单查询更新数据删 ...
视频教程-微信小程序从入门基础(第一季)-PHP
微信小程序从入门基础(第一季) 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程 ...
微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...

微信小程序学习（1）-基础开发