微信小程序开发流程与基本配置

最新推荐文章于 2024-07-24 08:44:08 发布

布布-flex

最新推荐文章于 2024-07-24 08:44:08 发布

阅读量1.1k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/luckyyulun/article/details/131773669

版权

1.小程序目录结构

图片目录（images）、页面目录（pages）、公共组件（components）、公共JavaScript（utils）、全局配置（app.json、project.config.json）等部分构成。

页面目录（pages）中，每个页面配置完成会自动生成4个文件（JS、JSON、WXSS、WXML），分别为页面逻辑（index.js）、页面配置（index.json）、页面样式（index.wxss）、页面结构模板（index.wxml）。

titls/index.js工具（格式时间） .eslintrc.js js语法检查

app.js根业务逻辑 app.json根配置

app.wxss全局css project.config.json项目配置

project.private.config.json私有配置

sitemap.json站点地图（微信搜索是否能够搜索你的小程序的页面）

所有的页面都需要在app.json中的config.pages中进行配置注册。

app.json小程序配置

pages 页面
--pages/main/main 主页
window窗口配置
---backgroundTextStyle  背景文字颜色
---nBBackgroundColor   导航栏背景色
----nBTitleText  导航栏文字
---nBTextStyle   导航栏文字颜色black white
tabBar  底部栏
---color 文字颜色
---selectedColor  选中文字颜色
---list   页面配置
-----pagePath   页面地址
-----iconPath   图标地址
---selsectedIconPath选中图表
----text文本

pages.json

pages:[存储页面]
window:{窗口与导航栏信息}
tabBar:底部栏

完整的配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2.小程序模板语法

文本渲染

{{}}

wx:if="{{条件}}"
wx:elif="{{条件}}"
wx:else

遍历

<view wx:for="{{list}}" wx:key="index">{{item}}</view>

自定义渲染

<view wx:for="{{list}}" wx:for-index="myindex" wx:for=item="myitem" wx:key="myindex">{{myitem}}</view>

导入

include 复制拷贝(排除template内容)

<include src="../../xxx"></include>

import 只导入模板

定义模板

item.wxml
<template name="item">
  <view>{{title}} --{{score}}</view>
</template>

2.导入模板

3.使用模板

常用的组件(标签)

view 容器块状
text 文本行内
image 图片
input 表单

一个页面的组成

.wxml 模板 .wxss 层叠样式表 .js 业务逻辑 .json 页面配置

css

app.wxss 全局的样式页面.wxss 只对页面有用

750rpx == 一屏的宽度

小程序事件

事件

绑定事件

bindtap="自定义函数"
bindConfirm="确认"
bindInput="表单发生变化"

事件的参数传递

<view data-item="{{item}}" data-msg="xxx"

2.自定义函数获取事件的参数

function say(e){

  // e.detail.value 表单的值
  // e.target.dataset.item
  // e.target.dataset.msg
}

更新视图数据

定义数据 data:{msg:"xx",list:[x,y]}
在自定义函数中获取数据 this.data.msg this.data.list
更新数据(更新视图) this.setData({msg,list})

表单的双向绑定

<input value="{{temp}}" bindChange="changeHd"

function changeHd(e){

  this.setData({temp:e.detail.value})
}

内置api方法

wx.showToast({title,icon}) wx.stopPullDownRefresh() wx.pageScrollTo({scrollTop,duration}) wx.request

wx.request({
  url,
  method:"GET|POST|PUT|DELETE",
  data:请求的参数
  sucess(res){请求成功回调函数}
  fail(err){请求失败回调函数}
  complete(){无论成功失败都执行的完成}
  header:{请求头}
})
onPullDownRefresh(){}
onReachBottom(){}
onShareTimeline(){}分享朋友圈
onShareAppMessage 分享朋友
onPageScroll(){} 监听页面滚动

页面方法

下拉刷新

页面.json "enablePullDownRefresh":true, "backgroundTextStyle": "dark",

监听下拉,执行请求 onPullDownRefresh(){ this.getList() }

在complete 停止下拉 wx.stopPullDownRefresh()

触底更新

监听触底 onReachBottom(){ this.getList(2) }

小程生命周期 app.js

onLaunch(){} 启动 onShow(){} 前台显示 onHide(){} 后台允许

页面生命周期

onLoad(){} 加载 onReady(){}渲染完毕 onShow(){} 页面显示 onHide(){} 页面隐藏 onUnload(){} 页面卸载

页面跳转

js跳转
组件(标签跳转)

使用第第三方组件weapp

Vant Weapp - 轻量、可靠的小程序 UI 组件库

cd 进入项目目录
npm init -y (初始化项目)
npm i @vant/weapp -S --production
工具->构建npm
app.json 引入组件

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
在页面中使用插件
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>

页面中的富文本处理(wxParse)

页面跳转navigator

url 跳转的页面
open-type 打开方式
navigate 跳转
redirect 重定向(当前页面不留记录)
navigateBack 返回
relaunch 重启跳转
switchTab 跳转到底部栏页面
exit 退出

小程序页面栈

小程序默认会缓存5个页面栈, navigate 增加一个页面栈 redirect 会替换条一个栈 navigateBack会移除一个页面栈 A->B->C->D->E

如果在当前页面执行navigateBack会触发卸载执行redirect 也会触发当前页面的卸载

页面生命周期

onLoad 页面加载(页面参数也可以获取options) onReady 页面渲染完毕 onShow 页面显示 onHide 页面隐藏 onUnload 页面卸载(从缓存的页面栈移除)

全局数据的传递

//app.js globalData 中定义数据
globalData: {
    userInfo: null,
    // 定义全局数据count
    count:5,
  }
//页面中取获取app的实例
const app = getApp();
//在onShow中获取globalData
this.setData({num:app.globalData.count})
//更新globalData
app.galbalData.count++;
this.setData({num:app.globalData.count})

本地存储

wx.setStorageSync(key,value) wx.getStorageSync(key)

常用组件(标准)看文档

开发能力

wx.login({}) 获取code
code发给后端实现登录逻辑(后端拿到openid)

把用户信息也发送给后端

获取用户头像

// 必须是点击事件触发
wx.getUserProfile({
  success(res){res.userInfo}
})

支付

0 微信支付平台要开通(商家才可) 1 获取采用wx.login() 获取code 2. 通过code获取用户的openid,把openid和订单信息(商品,价格..)发给后端 3. 后端返回支付信息,wx.requestPayment({支付信息}) 发起支付

获取电话号码

必须是按钮 open-type="getPhoneNumber" bindgetphoneNumber="getPhoneNumber" 获取code,发送给后端换取真正的手机号码

openid,电话号,支付信息:后端都是 appid+appSecret+code向微信服务器换取

常用组件

容器组件

view
swiper
swiper-item
scroll-view 基础内容
text
rigch-text 表单组件
button
input
picker
switch
textarea 导航
navigator 媒体
image
map
canvas
web-view 本质上是一个内置浏览器

app的种类

hibrd 混合开发(有原生有网页,网页内容通过web-view嵌入)
原生开发(采用android,swift)开发
webapp(就是网页)
网页加个(app的壳)

常用api(api)

设备信息联网信息图片上传与下载相册

自定义组件

小程序的组件

Component({
  externalClasses:["外部类"],
  options:选项:样式隔离,开启多个插槽,
  properties:父组件的传参(只读)
  lifetimes:生命周期:attached挂载,detached卸载
  pageLifetimes:页面什么周期:show,hide
  data:组件的数据(可写),
  methods:组件的方法
})

父传子

//父传递
<step value="{{size}}">
// 子接收
 properties:{
  value:{type:Number,value:1}
 }
 // 子访问
 this.data.value
 <text>{{value}}</text>

子传父

// 子发送事件
this.triggerEvent("change",num)
// 父监听change
<step bindchange="changeHd"></step>
// 处理函数获取数据的数据
changeHd(e){ e.detail}

插槽

默认插槽

// 定义插槽
<step><text>插槽内容</text></step>
// 子组件使用插槽
<slot></slot>

多个插槽

// 子组件定义开启多个插槽
options:{multipleSlots:true}
// 父组件定义插槽
<step><text slot="pre">pre</text><text slot="next">next</text></step>
// 子组件使用插槽
<slot name="pre"></slot>
<slot name="next"></slot>

外部类

组件外部定义组件内的样式

1定义外部类数组

externalClasses: ['btnclass'],

2.组件的wxml里面使用外部类

<image src="/static/home-cart.png" class="btnclass"

3在父组件定义外部类对应的class

<step value="{{size}}" bindchange="sizeChange" btnclass="btn">

在组件的样式定义样式

.btn{
	width: 150rpx !important;
	height: 150rpx !important;
}

组件的生命周期

lifetimes:{
    attached(){
      console.log("组件挂载完毕");
    },
    detached(){
      console.log("组件卸载")
    }
  },

组件中页面的生命周期

 pageLifetimes:{
    show(){
      console.log("页面显示")
    },
    hide(){

      console.log("页面隐藏")
    }
  },

组件中监听数据的变化(可以同时监听多个)

observers:{
    "value":function(v){
      console.log(v,"value发生变化");
    }
  },

搭建小程序的项目框架(使用分包)

分包
分包预加载
封装request.js

自定义导航栏

// 状态栏的高度
const {statusBarHeight,windowWidth} =   wx.getSystemInfoSync();   
// 获取胶囊的区域 
const rect = wx.getMenuButtonBoundingClientRect();
// 定义导航栏的高度
const navHeight = (rect.top-statusBarHeight)*2+rect.height+2;
// 胶囊宽度
const btnsWidth = (windowWidth-rect.right)*2+rect.width;

获取页面栈

const routes= getCurrentPages(); routes[0].route==="/pages/home/home"

wxs 语法

对数据进行格式化,在wxml里面使用js特定方法,像vue2中的filters

定义

function number(value,len=0){
	return value.toFixed(len);
}
function date(str,arg1="/",arg2=":"){
	var  d = getDate(str);
	var Y = d.getFullYear();
	var M = d.getMonth()+1;	
	var D = d.getDate();
	var hh = d.getHours();
	var mm = d.getMinutes();
	var ss = d.getSeconds();
	return [Y,M,D].join(arg1)+" "+[hh,mm,ss].join(arg2)
}
module.exports={number:number,date:date}
使用

<wxs src="/wxs/format.wxs" module="format"/>
<view>{{3.1415926}}</view>
<view>{{format.number(3.1415926,2)}}</view>
<view id="date">{{format.date("Mon Jul 17 2023 14:14:14 GMT+0800 (中国标准时间)")}}</view>

选择器

选择组件,得到组件的实例(js对象)

// vue的ref
const con = this.selectComponent(".my-component");
console.log(con);

下载节点 // 必须要在页面准备完毕后再执行 onReady

// 创建选择器
const query = wx.createSelectorQuery();

// 获取date的边界
// query.select("#date").boundingClientRect();
query.selectAll(".n1").boundingClientRect();
// 获取窗口信息
query.selectViewport().scrollOffset()
// 执行获取
query.exec(function(res){
  console.log(res);
})