【微信小程序开发小白零基础入门】微信小程序框架演示【建议收藏】

简介: 微信小程序框架演示文章目录微信小程序框架演示一、容器属性1.flex-direction的用法2.flex-wrap的用法3.justify-content的用法4.align-items的用法5.align-content的用法二、项目属性1.order的用法2.flex-shrink的用法3.flex-grow的用法4.flex-basis的用法5.flex-self的用法三、推荐小程序(欢迎各位大佬指导)一、容器属性1.flex-direction的用法flex-direction.wxml<view class='title'>1.flex-dir2.flex-wrap的用法3.j二、

微信小程序框架


文章目录

微信小程序框架

一、逻辑层

1.注册程序

1.App()函数

2.onPageNotFound()函数

3.getApp()函数

2.注册页面

1.初始数据

2.生命周期回调函数

3.页面事件处理函数

4.组件事件处理函数cont

5.route

6.setData

7.生命周期

3.页面路由

1.页面栈

2.获取页面栈

4.模块化

1.文件作用域

2.模块化

5.API

二、视图层

1.WXML

1.数据绑定

2.列表渲染

3.条件渲染

4.模板

5.事件

6.引用

2.WXSS

1.尺寸单位

2.样式导入

3.常用属性其中颜色可以用以下几种方式来表示:

4.内联样式

5.选择器

6.全局样式和局部样式

三、基本布局方法-flex模型

1.基本概念

1.Flex布局

2.容器和项目

3.坐标轴

4.Flex属性

2.容器属性

1.flex-direction属性

2.flex-wrap属性

3.justify-content属性

4.align-items属性

5.align-content属性

3.项目属性

1.order属性

2.flex-shrink属性

3.flex-grow属性

4.flex-basis属性

5.flex属性

6.align-self属性

四、推荐小程序(欢迎各位大佬指导)


一、逻辑层

1.注册程序

1.App()函数

小程序通过使用App(OBJECT)函数来进行应用注册,用其指定小程序的生命周期函数。 App()函数只能写在小程序根目录下的app.js文件中,且只能注册1个。

b3693ee8ea02a966cafca8bea0e7faf.png3bef6fb104cd4f96974e7b822e0fef92.png

2.onPageNotFound()函数

当需要打开的页面不存在时,微信客户端会有一个原生模板页面进行提示。 如果开发者不希望跳转到此页面,想自行处理则需用到onPageNotFound()监听器。

字段 类型 说明
path string 不存在页面的路径
query object 打开不存在页面的query
isEntryPage Boolean 是否本次启动的首个页面(例如从分享等入口进来,首个页面是开发者配置的分享页面)
App({
  onPageNotFound: function(res) {
     // 小程序需要打开的页面不存在时需要执行的代码
     wx.redirectTo({
       url: 'pages/test/test'
     }) // 如果是 tabbar 页面,请使用 wx.switchTab
  }
})

3.getApp()函数

在小程序的其他JS文件中均可以使用全局的getApp()函数获取小程序实例。 此时就可以在test.js页面拿到app.js中保存的公共数据并在console控制台打印输出了。

//app.js
App({
  globalData: {
    userInfo: null  //这是一个全局变量
  }
})
App({
  globalData: {
    userInfo: null  //这是一个全局变量
  }
  onLoad:function(options){
      console.log(this.globalData.userInfo) //使用this获得全局变量
  }
})

2.注册页面

小程序在每个页面JS文件中通过使用Page(OBJECT)函数来进行页面注册,该函数可以用于指定小程序页面的生命周期函数。

注:Page()函数只能写在小程序每个页面对应的JS文件中,且每个页面只能注册1个。

1486d4693ee86461d9c1ef657fff7ac.png

// pages/test/test.js
Page({
    data: {},
    onLoad: function (options) {},
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    onShareAppMessage: function () {}
})

1.初始数据

例如,在data中放置2个自定义数据。 此时{{msg01}}和{{msg02}}不会显示字面内容,而是会查找data中的初始数据,然后显示出“Hello 2018”字样。

Page({
  data:{
      msg01: 'Hello',
      msg02: 2021
  }
})
<view>{{msg01}} {{msg02}}</view>

2.生命周期回调函数

Page()函数中默认生成的onLoad、onShow、onReady、onHide以及onUnload均属于页面的生命周期回调函数。具体解释如下: onLoad:格式为onLoad(Object query),只在页面加载时触发一次,可以在onLoad的参数中获取打开当前页面路径附带的参数。 onShow():页面显示或从小程序后台切入前台时触发。 onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 onHide():页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。 onUnload():页面卸载时触发。如redirectTo或navigateBack到其他页面时。

3.页面事件处理函数

Page()函数中默认生成的onPullDownRefresh、onReachBottom、onShareAppMessage以及未自动生成的onPageScroll、onTabItemTap均属于页面的事件处理函数。具体解释如下: onPullDownRefresh():监听用户下拉刷新事件。 onReachBottom():监听用户上拉触底事件。 onPageScroll(Object):监听用户滑动页面事件。

//JS
Page({
  btnTap: function() {
    console.log(![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/aec61a7ef1164a89aab343b953ea9d7b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_16,color_FFFFFF,t_70,g_se,x_16)
'按钮被点击。')
  }
})

4.组件事件处理函数cont

例如tap就是点击事件,可以使用bindtap属性在组件上进行绑定。 以按钮组件为例,为其绑定点击事件

<!—WXML-->
<button bindtap="btnTap">点击此处</button>
//JS
Page({
  btnTap: function() {
    console.log('按钮被点击。')
  }
})

5.route

在Page()函数中,可以使用this.route查看当前页面的路径地址。

Page({
  onShow: function() {
    console.log(this.route)
  }
})

6.setData

在Page()函数中setData()可以用来同步更新data属性中的数据值,也会异步更新相关数据到WXML页面上去。

例如,在Page()的data中定义初始数据,JS文件代码如下

Page({
  data:{
      today: '2021-10-04'
  }
})

为组件追加自定义点击事件changeData。

在Page()中追加自定义函数changeData的具体内容。

用户如果触发了该组件的点击事件,WXML中的{{today}}值将立刻更新成2021-10-04。

<!—WXML-->
<view bindtap="changeData">{{today}} </view>
//JS
Page({
  changeData:function{
      this.setData({today: '2021-10-04'})
  }
})


7.生命周期

当小程序应用生命周期调用完onShow以后就准备触发小程序页面生命周期了。页面初次打开会依次触发onLoad-->onShow-->onReady这三个函数。同样如果被切换到后台,会调用页面onHide,从后台被唤醒会调用页面onShow。直到页面关闭会调用onUnload,下次打开还会照样触发onLoad-->onShow-->onReady这三个函数。

52eeefad015243f89e81d53bd94f0e77.png


3.页面路由

1.页面栈

在小程序中页面之间的切换路由均由框架统一进行管理,框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如表所示。微信图片_20220525131239.png


2.获取页面栈

小程序使用getCurrentPages()函数获取当前页面栈的实例,实例将以数组形式按栈的顺序给出。其中第一个元素为首页,最后一个元素为当前页面。 ### 3.路由方式 对于路由的触发方式以及页面生命周期函数如表所示。微信图片_20220525131306.png


4.模块化

1.文件作用域

在小程序的任意JS文件中声明的变量和函数只在该文件中有效,不同的JS文件中可以声明相同名字的变量和函数,不会互相影响。 如果需要跨页面进行数据共享,可以在app.js中定义全局变量,然后在其他JS文件中使用getApp()来获取和更新。例如在app.js设置全局变量msg。

//app.js
App({
  globalData: {
    msg: ' Goodbye 2018'  //这是一个全局变量
  }
})
//test.js
var app = getApp()
app.globalData.msg = 'Hello 2019' //全局变量被更新


2.模块化

程序支持将一些公共JavaScript代码放在一个单独的JS文件中,作为一个公共模块可以被其他JS文件调用。模块只能通过module.exports或者exports才能对外提供接口。 例如,在根目录下新建utils文件夹并创建公共JS文件common.js。

//common.js
function sayHello(name) {
  console.log('Hello ${name} ! ')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} ! ')
}
module.exports.sayHello = sayHello //推荐使用这种
exports.sayGoodbye = sayGoodbye
//test.js
var common = require('../../utils/common.js') //目前暂时不支持绝对路径地址
Page({
  hello: function() {
    common.sayHello('2019')
  },
  goodbye: function() {
    common.sayGoodbye('2018')
  }
})


5.API

小程序开发框架提供丰富的微信原生API接口,可以方便的调起微信提供的能力,如获取用户信息、本地存储、地理定位等。常用的API列举如下: 网络:实现小程序与服务器端的网络交互; 媒体:实现图片、录音、音/视频和相机管理; 文件:实现临时文件和本地文件的管理; 数据:实现小程序本地数据缓存; 位置:使用小程序获取地理位置和控制地图组件; 设备:获得手机内存、网络、传感器、扫码、剪贴板、振动等设备能力; 界面:实现交互反馈、导航条设置、页面导航、动画、绘图等能力。 这些API及其相关标签会在后续章节陆续介绍。

二、视图层

1.WXML

WXML的全称是WeiXin Markup Language(微信标记语言),类似于HTML也是一种使用<标签>和

1.数据绑定

1.简单绑定


在WXML页面中可以使用双花括号{{变量名}}的形式表示动态数据

<view>{{msg}}<view>
Page({
  data: {
    msg: '你好!'
  }
})


2.属性绑定


属性绑定

组件的属性也可以使用动态数据,例如组件的id、class等属性值

<view id='{{id}}'>测试</view>
Page({
  data: {
    id: 'myView'
  }
})


3.控制属性绑定


控制属性绑定

控制属性也可以使用动态数据,但必须在引号内。

<view wx:if='{{condition}}'>测试</view>
Page({
  data: {
     condition: false
  }
})


4.关键字绑定


关键字绑定

如果直接在引号内写布尔值也必须用双花括号括起来

<view wx:if='{{false}}'>测试1</view>
<view wx:if='{{true}}'>测试2</view>


5.运算绑定


运算绑定

双花括号内部还可以进行简单的运算,支持的运算方式包括:

三元运算

算数运算

逻辑判断

字符串运算

数据路径运算


算数运算示例代码

<!--WXML
a + b}} + {{c}} + d </view> <!--显示的结果是3+3+d-->
//JS文件代码
Page({
    data: {
      a : 1, b : 2, c : 3
    }
})


6.组合绑定


组合绑定

还可以在双花括号内直接进行变量和值的组合,构成新的对象或者数组


数组组合示例代码

<!--WXML页面代码-->
<view wx:for='{{[1,2,x,4]}}'>{{item}}</view> <!--最终组合成数组[1, 2, 3, 4]。-->
//JS文件代码
Page({
    data: {
      x : 3
    }
})


2.列表渲染

简单列表

也可以使用wx:for-item和wx:for-index自定义当前元素和下标的变量名。

<!—WXML修改后-->
<view wx:for='{{array}}' wx:for-index='stuID' wx:for-item='stuName'>
      学生{{stuID}}:{{stuName}}
</view>
//JS
Page({
    data:{
        array:[ '张三', '李四', '王五']
    }
})


嵌套列表

wx:for还可以嵌套出现,例如九九乘法口诀表代码。

<!--WXML-->
<view wx:for="{{array}}" wx:for-item="i">
  <view wx:for="{{array}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
//JS
Page({
    data:{
        array:[1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
})


多节点列表

可以将wx:for用在标签上,以渲染一个包含多节点的结构块。

注:并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染

<block wx:for="{{[ '张三', '李四', '王五']}}"> 
<!--数组也可以直接写在wx:for中-->
  <view> 学号:{{index}} </view>
  <view> 姓名:{{item}} </view>
</block>
<!--效果等同于-->
  <view> 学号:0 </view>
  <view> 姓名:张三 </view>
  <view> 学号:1 </view>
  <view> 姓名:李四 </view>
  <view> 学号:2 </view>
  <view> 姓名:王五 </view>


3.条件渲染

简单条件

也可以组合使用0-N个wx:elif加上1个wx:else来添加其他条件

<!--WXML-->
<view wx:if="{{x > 5}}"> A </view>
<view wx:elif="{{x > 2}}"> B </view>
<view wx:else> C </view>
//JS
Page({
    data:{
          x: 3
    }
})


多节点条件

如果要一次性判断多个组件标签,可以使用标签将多个组件包装起来,并在上使用wx:if控制属性。

<!--WXML-->
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>


4.模板

小程序使用在WXML文件中定义代码片段作为模板使用,每个都使用name属性自定义模板名称。

<!--WXML-->
<template name="myTemp">
  <view>
    <text> Name: {{name}} </text>
    <text> Age: {{age}} </text>
  </view>
</template>


5.事件

事件是视图层到逻辑层的通讯方式,有以下特点: 可以将用户的行为反馈到逻辑层进行处理; 可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数; 对象可以携带额外信息,如 id, dataset, touches。

事件使用方式

展开输出内容前面的箭头可以查看详情,整理后节选信息如右边代码框所示。

例如想获得data-my中的数据值,可以描述为e.currentTarget.dataset.my,开发者未来可以利用这些信息进行后续的代码编写。

{
  type:"tap",
  timeStamp:2859,
  currentTarget: {
    id: "myBtn",
    dataset:  {
      my:"hello"
    }
  },
  detail: {x: 214, y: 17.5},
  touches:[{
    identifier:0,
    pageX:214,
    pageY:17.5,
    clientX:214,
    clientY:17.5
  }]
}


6.引用

1.import 需要注意的是,有作用域的概念,即只会引用目标文件自己定义的template,而不会引用目标文件里面用引用的第三方模板。

<!--A页面-->
<template name="A">
  <text> A页面模板</text>
</template>
1
<!--B页面-->
<import src="a.wxml"/>
<template name="B">
  <text> B页面模板</text>
</template>
1
<!--C页面-->
<import src="b.wxml"/>
<template is="A"/>  <!-- 引用模板失败!C必须自己import A才可以 -->
<template is="B"/>  <!-- 引用模板成功!C页面有import B -->


2.include

例如,为页面制作统一的页眉页脚,示例如下。

页眉header.wxml代码:

<view>这是小程序的页眉</view>


首页index.wxml代码:

<view>这是小程序的页脚</view>
1
2
页脚footer.wxml代码:
<include src="header.wxml"/>
<view>正文部分</view>
<include src="footer.wxml"/>


2.WXSS

尺寸单位 小程序规定了全新的尺寸单位rpx(responsive pixel),可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸大小,统一规定屏幕宽度为750rpx。 rpx不是固定值,屏幕越大,1rpx对应的像素就越大。例如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

1.尺寸单位

微信图片_20220525133054.png

2.样式导入

小程序在wxss样式表中使用@import语句导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

3.常用属性其中颜色可以用以下几种方式来表示:

RBG颜色:用RGB红绿蓝三通道色彩表示法,例如rgb(255,0,0)表示红色; RGBA颜色:在RGB的基础上加上颜色透明度,例如rgba(255,0,0,0.5)表示半透明红色; 16进制颜色:又称为HexColor,用#加上6位数字表示,例如#FF0000表示红色; 预定义颜色:使用颜色英文单词的形式表示,例如red表示红色。小程序目前共预设了148种颜色名称,见附录。

微信图片_20220525133030.png

4.内联样式

小程序使用class属性指定样式规则,其属性值是一个或多个自定义样式类名组成,多个样式类名之间用空格分隔。

.style01{
    color: red;  //文字为红色
}
.style02{
    font-size: 20px;  //字体大小为20像素
    font-weight: bold;  //字体加粗
}
<view class="style01 style02">测试</view>
<!--上述代码表示组件同时接受.style01和.style02的样式规则。注意在class属性值的引号内部不需要加上类名前面的点。-->


5.选择器

小程序目前在wxss样式表中支持的选择器如表所示。

选择器 样例 样例描述

.class .demo 选择所有拥有class="demo"属性的组件

#id #test 选择拥有id="test"属性的组件

element view 选择所有view组件

element, element view, text 选择所有文档的view组件和所有的text组件

after viewafter 在view组件后边插入内容

before view::before 在view组件前边插入内容

6.全局样式和局部样式

小程序wxss样式表中规定的样式根据其作用范围分为两类: 全局样式:在app.wxss中的样式,作用于每一个页面; 局部样式:在页面wxss文件中定义的样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

三、基本布局方法-flex模型

1.基本概念

1.Flex布局

小程序使用了flex模型来提高页面布局效率。这是一种灵活的布局模型,当页面需要适应不同屏幕大小以及设备类型时该模型可以确保元素在恰当的位置。

2.容器和项目

在flex布局中,用于包含内容的组件称为容器(container),容器内部的组件称为项目(item)。容器允许包含嵌套

<view id="A">
    <view id="B">
        <view id="C"></view>
    </view>
</view>


3.坐标轴

flex布局的坐标系是以容器左上角的点为原点,自原点往右、往下两条坐标轴。默认情况下是水平布局,即水平方向从左往右为主轴(main axis),垂直方向自上而下为交叉轴(cross axis),也可以使用样式属性flex-direction: column将主轴与交叉轴位置互换。

4.Flex属性

在小程序中,与flex布局模型相关的样式属性根据其属标签的类型可以分为容器属性和项目属性。 容器属性:用于规定容器布局方式从而控制内部项目的排列和对齐方式。 项目属性:用于设置容器内部项目的尺寸、位置以及对齐方式。

2.容器属性

1.flex-direction属性

flex-direction属性用于设置主轴方向,通过设置坐标轴可以规定项目的排列方向。

其语法格式如下

.container{
  flex-direction: row(默认值)| row-reverse | column | column-reverse
}


属性值解释如下: row:默认值,主轴在水平方向从左到右。项目按照主轴方向从左到右排列; row-reverse:主轴是row的反方向。项目按照主轴方向从右到左排列; column:主轴在垂直方向从上而下。项目按照主轴方向从上往下排列; column-reverse:主轴是column的反方向。项目按照主轴方向从下到上排列。

2.flex-wrap属性

flex-wrap属性用于规定是否允许项目换行,以及多行排列时换行的方向。

其语法格式如下:

.container{
  flex-wrap: nowrap(默认值)| wrap | wrap-reverse
}


属性值解释如下: nowrap:默认值,表示不换行。如果单行内容过多,项目宽度可能会被压缩。 wrap:容器单行容不下所有项目时允许换行排列。 wrap-reverse:容器单行容不下所有项目时允许换行排列。换行方向为wrap的反方向。

3.justify-content属性

justify-content属性用于设置项目在主轴方向上对齐方式,以及分配项目之间及其周围多余的空间。其语法格式如下:

.container{
justify-content: flex-start (默认值)| flex-end| center| space-between| space-around| space-evenly
}


属性值解释如下: flex-start:默认值,表示项目对齐主轴起点,项目间不留空隙; center:项目在主轴上居中排列,项目间不留空隙。 flex-end:项目对齐主轴终点,项目间不留空隙; space-between:项目间间距相等,第一个和最后一个项目分别离起点/终点距离为0; space-around:与space-between相似。不同点为,第一个项目离主轴起点和最后一个项目离终点距离为中间项目间间距的一半; space-evenly:项目间距、第一个项目离主轴起点以及最后一个项目离终点距离均相等。

4.align-items属性

align-items属性用于设置项目在行中的对齐方式。其语法格式如下:

.container{
  align-items:stretch(默认值)| flex-start | center | flex-end | baseline
}


属性值解释如下: stretch(默认值):未设置项目尺寸时将项目拉伸至填满交叉轴; flex-start:项目顶部与交叉轴起点对齐; center:项目在交叉轴居中对齐; flex-end:项目底部与交叉轴终点对齐; baseline:项目与行的基线对齐,在未单独设置基线时等同于flex-start。

5.align-content属性

align-content属性用于多行排列时,设置项目在交叉轴方向上的对齐方式,以及分配项目之间及其周围多余的空间。其语法格式如下:

.container{
  align-content: stretch(默认值) | flex-start | center | flex-end | space-between |space-around | space-evenly
}


属性值解释如下: stretch:默认值,未设置项目尺寸时将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸,项目尺寸不变,项目行拉伸至填满交叉轴。 flex-start:首行在交叉轴起点开始排列,行间不留间距。 center:行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等。 flex-end:尾行在交叉轴终点开始排列,行间不留间距。 space-between:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。 space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。 space-evenly:行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。 注:多行排列要设置flex-wrap属性值为wrap,表示允许换行。

3.项目属性

1.order属性

order属性用于设置项目沿主轴方向上的排列顺序,数值越小,排列越靠前。属性值为整数。其语法格式如下:

.item{
  order: 0(默认值)| <integer>
}


2.flex-shrink属性

flex-shrink属性用于设置项目收缩因子。当项目在主轴方向上溢出时,通过项目收缩因子的规定比例来压缩项目以适应容器。其语法格式如下:

.item{
flex-shrink: 1(默认值) | <number>
}


3.flex-grow属性

flex-grow属性用于设置项目扩张因子。当项目在主轴方向上还有剩余空间时,通过设置项目扩张因子进行剩余空间的分配。。其语法格式如下:


.item{
  flex-grow: 0(默认值)| <number>
}


4.flex-basis属性

flex-basis属性

其语法格式如下:


.item{
  flex-basis: auto(默认值)| <number>px
}


5.flex属性

flex属性

flex属性是flex-grow,flex-shrink,flex-basis的简写方式,其语法格式如下:


.item{
flex: none | auto | @flex-grow @flex-shrink@flex-basis
}


6.align-self属性

align-self属性设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器的align-items,这么做可以对项目的对齐方式做特殊处理。其语法格式如下:


.item{
  align-self: auto(默认值) | flex-start | center | flex-end | baseline |stretch
}

四、推荐小程序(欢迎各位大佬指导)




相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
29天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
29天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
270 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
112 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
110 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
4月前
|
存储 小程序 JavaScript
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
63 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
86 7