-
微信小程序基础
微信小程序基础
- 首先下载微信开发者工具
- 安装后创建小程序，分析一下里面的各个文件的作用
- 新建项目
页面介绍
项目组成
新建页面
- 在pages文件夹右键建立新的文件夹
- 在文件中右键新建页面
- 哪个page在最上面，默认显示哪页
- json要求严格语法，不能有多余的注释和逗号
特别注意
页面组件
pages/home
home.wxml 模板文件
home.js 业务逻辑
home.wxss 样式
home.json 页面配置小程序的模板语法约等于vue的模板语法
- wxss
默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽 - 内置组件
view组件块组件
text 组件行内组件
button组件 按钮
input组件 表单
从中我们可以发现 - 文本渲染
{{ msg}} - 可以执行简单的js表达式
{{2+3}}
{{msg.length}} - 条件渲染
wx:if=""
wx:elif=""
wx:else - 列表渲染
wx:for="{{list}}"
wx:key="index"
{{item}}
{{index}} - 自定义列表渲染
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}
wx:for-item , 数组当前项的变量名,默认为 item
作用：使用 （当前项变量名.属性名） 取得属性值
wx:for-index, 数组的当前项的下标变量名 , 默认为 index
wx:key 来指定列表中项目的唯一的标识符。
作用：希望列表中的项目保持自己的特征和状态 - 导入（不常用）
import
只能导入template内容
template/utils.wxml
用户名：{{name}}- home.wxml
- include
只能导入非template内容
template/foot.wxml{{内容}} home.wxml
- home.wxml
- home.js
data: { u1:{name:"张张张",age:"18"}, u2:{name:"李立立",age:"28"}, list:["react","vue","小程序"], score:55, isLog:false, msg:"你好，腾讯" },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- home.wxml
<!--pages/home/home.wxml--> <view class="title">使用include导入 非template的模板内容</view> <include src="/template/foot"></include> <include src="/template/foot"></include> <view class="title">import导入</view> <import src="/template/utils.wxml"></import> <template is="userCart" data="{{...u1}}"></template> <template is="userCart" data="{{...u2}}"></template> <view class="title">自定义列表渲染</view> <view wx:for="{{list}}" wx:key="index" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex"> {{myindex+1}}{{myitem}} </view> <view class="title">列表渲染</view> <view wx:for="{{list}}" wx:key="index"> {{index+1}}{{item}} </view> <view class="title">多重条件渲染</view> <view wx:if="{{score>=90}}">小汽车</view> <view wx:elif="{{score>=80}}">摩托车</view> <view wx:elif="{{score>=70}}">电动车</view> <view wx:elif="{{score>=60}}">自行车</view> <view wx:else>打一顿</view> <view class="title">条件渲染</view> <view wx:if="{{isLog}}">欢迎回来</view> <view>请先登录</view> <view class="title">文本渲染 {{msg.length}} </view> <view>{{msg.length>8?'大于':'小于'}}</view> <view class="title">组件2</view> <text>文本1</text> <text>文本2</text>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
效果
事件
bindInput 表单输入时
bindconfirm 表单输入确认
bindtap 点击时候事件的传参
表单的绑定
inputHd(e){ this.setData({s1:e.detail.value}) }
表单的值获取：e.detail.value<view>表单绑定view> <input value="{{s1}}" class="inp" bindinput="inputHd">input> <button type="primary">{{s1}}button> <button type="primary" size="mini">你好button> <button type="default" size="mini" bindtap="tapHd">你好button> <button data-msg="中国" type="primary" bindtap="sayHi">事件传参Abutton> <button data-msg="家乡" type="warn" bindtap="sayHi">事件传参Bbutton> <navigator open-type="navigate" url="/pages/nav/nav">返回navigator>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
data: { s1:"小程序很简单", name:"", age:"", }, inputHd(e){ //获取表单的值 var s1 = e.detail.value; //更新data的值与视图 this.setData({s1}) }, // 事件传参 sayHi(e){ console.log(e); var msg = e.target.dataset.msg wx.showToast({ title: '你好'+msg, }) }, tapHd(e){ //输出事件 console.log(e); //提示文本 //wx开头的方法，内置api wx.showToast({ title: '你好，朋友', }) },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
获取笑话案例
- 生命周期
onLoad 页面加载完毕
onPullDownRefresh 下拉刷新
onReachBottom 触底更新 - 页面配置
"enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle": "dark", 背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents": {} 组件 - 更新数据与视图
this.setData({k:v})
data: { joks:[], //数组笑话 page:1, //当前页 type:1, }, getJoke(type=1){ var that = this; //缓存this var joks = this.data.joks; //获取到原来的joks var page = this.data.page; wx.request({ url: 'http://dida100.com/mi/list.php?page='+page, success(res){ //把请求到的数据与现有数据joks连接起来 //如果type值为1，咱们就下拉刷新 if(type==1){ //把数据更新到前面 joks = res.data.result.concat(joks); //显示加载提示 wx.showToast({ title: '新加载'+res.data.result.length+"条笑话", icon:"none" }) // 停止下拉刷新 wx.stopPullDownRefresh(); }else{ //把更新的数据加载到后面 joks = joks.concat(res.data.result); } //更新joks和page that.setData({joks,page:page+1}) } }) }, onLoad(options) { //获取笑话 this.getJoke(); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
渲染
<view class="list"> <view class="item" wx:for="{{joks}}" wx:key="index"> {{item.summary}} view> view>- 1
- 2
- 3
- 4
- 5
实现“todolist案例”
- 设计数据list存储数据
{ done:true,是否完成 title：”“显示的文本 } - temp
和输入框进行双向绑定的临时数据 - 方法
添加
删除
data: { temp:"", //和输入进行绑定临时数据（用来添加） list:[{title:"学习vue",done:true},{title:"学习小程序",done:false}] }, //删除列表 delTodo(e){ // 获取item var item = e.target.dataset.item; // 获取当前list var list = this.data.list; // 查找下标 // 当回调函数返回true的时候 // findIndex返回当前列表的下标 var ind = list.findIndex(value=>value.title==item.title); //删除 list.splice(ind,1); //更新数据 this.setData({list}) wx.setStorageSync('list', this.data.list) }, //添加到列表 addTodo(){ //获取原来列表 var list = this.data.list; //添加一个对象 console.log(this.data.temp); list.unshift({ dont:false, title:this.data.temp, }) //更新数据 this.setData({list,temp:''}); wx.setStorageSync('list', this.data.list) }, inputHd(e){ //实现双向绑定 this.setData({temp:e.detail.value}) }, onLoad(options) { //获取 var list = wx.setStorageSync('list')||[]; //更新列表数据 this.setData({list}) },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
渲染
<input type="text" bindinput="inputHd" bindconfirm="addTodo" value="{{temp}}" placeholder="请输入要添加的计划" /> <view> <view class="item" wx:for="{{list}}" wx:key="title"> <switch type="checkbox" checked="{{item.done}}">switch> <text>{{item.title}}text> <text bindtap="delTodo" data-item="{{item}}">×text> view> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
小程序的限制
- 源文件大小
- 每个包不能超过2M
- 总共不能超过16-20M
- 页面缓存堆栈5层
- 底部栏
- 对多5个最少2个
- 底部栏图片31K
- 本地存储
- 一次1M，最多100M
- setDate
- 不能超过1M
底部栏tabBar的配置在app.json
"tabBar": { "color": "#777", //默认颜色 "selectedColor": "#1cb9ce", //选中颜色 "list": [{ "pagePath": "pages/nav/nav", //跳转地址 "text": "跳转", //文字 "iconPath": "./images/t1.png", //未选中时的照片 "selectedIconPath": "./images/t1-h.png" //选中时的照片 }, { "pagePath": "pages/todo/todo", "text": "计划", "iconPath": "./images/t2.png", "selectedIconPath": "./images/t2-h.png" } ] },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
小程序的页面跳转
- 组件跳转
url跳转的地址open-type类型有↓- 1
- api跳转
wx.navigateTo 跳转wx.switchTab 切换底部栏wx.redirect 重定向wx.reLaunch 重启
<view style="padding: 30rpx;"> <button size="mini" type="primary" bindtap="goEvent" data-type="navigate">跳转到eventbutton> <button size="mini" type="warn" bindtap="goEvent" data-type="redirect">跳转到event（替换）button> view> <view> <navigator open-type="navigate" url="/pages/event/event">事件eventnavigator> <navigator open-type="redirect" url="/pages/event/event">跳转并替换navigator> <navigator open-type="reLaunch" >重启 navigator> <navigator open-type="navigateBack">返回 navigator> view> <navigator open-type="switchTab" url="/pages/todo/todo">计划navigator>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
* 页面的初始数据 */ data: { }, goEvent(e){ //获取到传参的参数type var type = e.target.dataset.type; //如果type值是redirect 替换跳转 if(type=="redirect"){ wx.redirectTo({ url: '/pages/event/event', }) }else{ //否则就普通跳转 wx.navigateTo({ url: '/pages/event/event', }) } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { //更新导航栏的标题 wx.setNavigationBarTitle({ title: '导航与跳转', }) },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
页面栈
- A页面 ,B 页面 ,C 页面,D 页面,E 页面
通过 open-type = “navigate” 页面会缓存起来 最多缓存5层 - A页面->redirect B页面
- A页面是不会被缓存
- E 页面 “navigateBack” 到 D页面 （页面的缓存移除一次）
总结：navigate会增加一层缓存页面
redirect 会替换一层缓存页面
navigateBack 会移除一层缓存页面
页面传参
- 小程序页面传参主要通过 查询传参
传递：url=“xxxx/xxx?name=mumu&age=18”
接收：onLoad options参数接收
封装request
-
- 定义baseURL
-
- 添加请求头
-
- 添加加载提示
-
- 同一错误处理
//基础的url const URL = { baseURL:"http://dida100.com" } function tansParam(obj){ var str = ""; for(var k in obj){ str+=k+"="+obj[k]+"&"; } // 移除最后一个& return str.slice(0,-1); } function request(option){ var url = option.url; //01 可以添加baseURL // 是不是以http开头的，是用url，不是加上baseURL url = url.startsWith("http")?url:URL.baseURL+url; //选项里面有params（get传入的参数） if(option.params){ //如果有参数，把参数转换为url编码形式加入 url+="?"+tansParam(option.params); } // 02 可以添加请求头 var header = option.header||{}; header.Authorization = "Bearer " +wx.getStorageSync('token'); // 03 可以添加加载提示 if(option.loading){ wx.showToast({ title: option.loading.title, icon:option.loading.icon, }) } //返回一个promise return new Promise((resolve,reject)=>{ wx.request({ //请求的地址如果 http开头直接用url，不是http开头添加baseURL url:url, method:option.method||"GET", //请求的方法，默认get data:option.data, header, success(res){ //请求成功 resolve(res.data) }, fail(err){ // 04 对错误进行处理 uni.showToast({title:"加载失败",icon:"none"}) //请求失败 reject(err); }, complete(){ //关闭加载提示 wx.hideToast() } }) }) } //定义get简易方法 request.get=(url,config)=>{ return request({url,method:"get",...config}) } // 定义post简易方法 request.post=(url,data,config)=>{ return request({url,method:"post",data,...config}) } //导入request module.exports={request}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
npm安装Vant Weapp
官方网址https://youzan.github.io/vant-weapp/#/quickstart
- 首先在项目里初始化
- 通过 npm 安装
npm i @vant/weapp -S --production - 将 app.json 中的 “style”: “v2” 去除
- 修改 project.config.json
- 在工具栏构建npm
- 导入组件
- 使用组件
html转微信小程序组件
- 01 wxParse 拷贝文件夹
- 02 content.js
var WxParse = require(‘…/…/wxParse/wxParse.js’);
03 content.wxss
- 04 content.wxml
小程序分包优化
- 小程序一个包最大2M（用户能迅速的开小程序）
- 如果项目比较大，引用很多插件，2M根本不够用分包
-
- 底部栏对应的页面
主包
- 底部栏对应的页面
-
- 需要点击后进入页面可以作为子包
-
- 子包可以访问主包的内容
主包不能访问子包的内容
子包之间也不能访问
- 子包可以访问主包的内容
-
分包与预加载
-
分包
-
预加载
网络
-
- 小程序请求的地址必须https
-
- 小程序请求的地址必须和后台约定的
-
如果不没有使用约定的地址(只能测试不能上线)
-
手机中测试 右上角三个点击打开调试重启后网络请求
-
相关阅读:
【企业级SpringBoot单体项目模板】 —— 全局配置
单商户商城系统功能拆解31—营销中心—幸运抽奖
Java大总结之——静态方法和静态变量+代码块+抽象类+接口+单例设计模式+模版设计模式
消息中间件篇之RabbitMQ-消息不丢失
01 关系模型及其相关内容
java计算机毕业设计华水疫情预警与防护用品调度系统源码+mysql数据库+系统+lw文档+部署
前端使用docx-preview展示docx + 后端doc转docx
JS-前端学习随笔-对于深、浅拷贝的理解
SQL Server 基础语法2(超详细!)
最新Java开发毕业论文参考文献干货满满
- 原文地址：https://blog.csdn.net/m0_59642141/article/details/127764828
