好的Hybird APP框架推荐

Hybird APP框架推荐

AVM（Application-View-Model））是千语创想基于标准H5子集设计的DSL中间语言编程框架，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

AVM核心库只关注终端差异、虚拟DOM、组件化和数据绑定，与其他重量级框架不同的是，Avm不需要太多的外部依赖，仅需要组件化、数据驱动等更现代化框架的能力。其可具备如下能力：

1. Virtual DOM：通过虚拟DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

2. 组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的DOM结构和行为，让开发者专注于应用的功能和外观；

3. 数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

4. 状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

5. 类Vue语法和兼容React JSX，兼具Vue的轻巧和React的灵活性。

千语创想 DSL最终可编译为标准JS，通过DeepEngine渲染到app端和Web端，或者编译为微信小程序代码，用于微信小程序平台发布。

AVM框架实战案例

本案例为开发者预约app项目实战经验分享。一、整理项目脑图<img src="https://picx.zhimg.com/50/v2-ce3baea483adf1fe1848387d2faa18f4_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="1619" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic1.zhimg.com/v2-ce3baea483adf1fe1848387d2faa18f4_r.jpg?source=1940ef5c"/>二、项目前端本项目中前端采用千语创想 AVM 多端开发技术进行开发，要点包括 swiper 轮播图、网络请求封装等。使用千语创想多端技术进行开发，实现一套代码多端运行，支持编译成 Android & iOS app 以及微信小程序。1、千语创想使用步骤：（1）下载千语创想 Studio 3 作为开发工具。（2）注册账号后在控制台创建 app。<img src="https://pic3.zhimg.com/50/v2-0c6ed23e8b4a784d393df550bf9bad65_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="417" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pica.zhimg.com/v2-0c6ed23e8b4a784d393df550bf9bad65_r.jpg?source=1940ef5c"/>（3）设置证书，一键创建安卓证书<img src="https://pica.zhimg.com/50/v2-3a1a8bd2445e592abf4bdda35f3f08fa_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="450" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic3.zhimg.com/v2-3a1a8bd2445e592abf4bdda35f3f08fa_r.jpg?source=1940ef5c"/>（4）千语创想 Studio3 拉取代码，点击项目，导出云端检出<img src="https://pic1.zhimg.com/50/v2-789c0ba03aecf46ab6b104507a69a297_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="2166" data-rawheight="600" class="origin_image zh-lightbox-thumb" width="2166" data-original="https://pic1.zhimg.com/v2-789c0ba03aecf46ab6b104507a69a297_r.jpg?source=1940ef5c"/>检出<img src="https://pic2.zhimg.com/50/v2-1fb8560b5715a506a842593e79fc2840_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="509" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pica.zhimg.com/v2-1fb8560b5715a506a842593e79fc2840_r.jpg?source=1940ef5c"/>检出后工作目录（5）修改或者提交项目源码，并为当前项目云编译自定义 Loader 进行真机同步调试预览。使用 AppLoader 进行真机同步调试预览，后台自动以 loader 下载到手机端，安装后，点击小圆圈，输入 ip 地址：192.168.2.152 端口：10916，连接后真机同步，可以看到刚创建后的结果。<img src="https://pica.zhimg.com/50/v2-e5e4184b43611a7eb0917d404149709d_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="536" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pica.zhimg.com/v2-e5e4184b43611a7eb0917d404149709d_r.jpg?source=1940ef5c"/><img src="https://pic1.zhimg.com/50/v2-4ef05369e34665d5ec6c51a92b49d664_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="564" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic1.zhimg.com/v2-4ef05369e34665d5ec6c51a92b49d664_r.jpg?source=1940ef5c"/><img src="https://pica.zhimg.com/50/v2-ffaab756691475055bb179ca8184fdee_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="2500" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic1.zhimg.com/v2-ffaab756691475055bb179ca8184fdee_r.jpg?source=1940ef5c"/>2、AVM 框架的使用为什么选择 AVM？易用：有 Vue、React 基础，可快速上手，配套专用的开发工具千语创想 Studio3。多端：一次开发，多端渲染，一个技术栈搞定移动端开发。功能 API 丰富：提供 1 千 + 模块和 2 万 + API 可直接调用，面向行业和场景无限制（1）UI官方文档：https://docs.qianyuthink.com/qianyuthink3/#/component/view?index=4&subIndex=0原来有一个叫流浪男的做的 AUI 框架，还不错，后来就是用一些简单的大公司的框架，这个看自己了。好多 UI 都是自己设计，自己写一些 UI。字体图标用的阿里字体图标。CSS 框架，要是没啥选择推荐可以用 AUI，这个框架有 CSS 基础的一看就知道写的啥，而且特别好修改。实在不行了直接改源码。千语创想官网组装了一套 vant 的，https://docs.qianyuthink.com/Client-API/AVM-Components/readme.md（2）ajax 网络交互// 表单方式提交数据或文件// 表单方式提交数据或文件

api.ajax({

url: 'http://192.168.1.101:3101/upLoad',

method: 'post',

data: {

values: {

files: {

file: 'fs://a.gif'

}

}, function(ret, err) {

if (ret) {

api.alert({ msg: JSON.stringify(ret) });

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

// 提交JSON数据

api.ajax({

url: 'http://192.168.1.101:3101/upLoad',

method: 'post',

headers: {

'Content-Type': 'application/json;charset=utf-8'

data: {

body: {

}

}, function(ret, err) {

if (ret) {

api.alert({ msg: JSON.stringify(ret) });

} else {

api.alert({ msg: JSON.stringify(err) });

}

});（3）vue 指令使用（v-for v-show v-if v-else v-for v-on v-bind v-model 等）1 > 数据绑定使用 Mustache 语法：<text text={{msg}}></text>使用 v-bind 指令：<text v-bind:text="msg"></text>2 > 事件绑定<template>

<text onclick="doThis('avm');">Click me!</text>

</template>

export default {

methods: {

doThis(msg){

api.alert({

msg: msg

});

}

</script>（4）注册、登录1 > 注册接口链接：http://showdoc.deui.cn/web/#/27?page_id=365注册代码<template name='tpl'>

<safe-area class="header">

</safe-area>

<scroll-view class="main">

<view>

</view>

</div>

</div>

</scroll-view>

</div>

</view>

</template>

export default {

apiready() {

api.setStatusBarStyle({

style: "light",

color: "-"

});

data() {

return {

zhanghao: '',

password: '',

src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"

};

computed: {

methods: {

handleClick(e) {

api.openWin({

url: './main.stml',

pageParam: {

}

});

reg() {

var _this = this;

// 提交JSON数据

api.ajax({

url: 'http://yy.deui.cn/api.php/index/re',

method: 'get',

// headers: {

// 'Content-Type': 'application/json;charset=utf-8'

// },

data: {

body: {

username: _this.zhanghao,

password: _this.password

}

}, function (ret, err) {

console.log(JSON.stringify(ret))

if (ret.msg == '返回成功') {

api.toast({

msg: '注册成功',

location: "middle"

});

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}

};

</script>

<style>

.denglu {

margin-top: 10px;

font-size: 14px;

}

.touxiang {

margin-top: 10%;

width: 150px;

height: 150px;

border-radius: 100px;

margin: 0 auto;

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

}

.originImage {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 1;

}

.page {

/* position:fixed; */

position: relative;

z-index: 9;

width: 100%;

height: 100%;

}

.page1 {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 2;

}

input {

padding-left: 10px;

line-height: 35px;

height: 35px;

border-radius: 5px;

}

.zhanghao {

display: block;

margin: 0 auto;

margin-top: 15%;

margin-bottom: 15px;

height: 60px;

}

.mima {

display: block;

margin: 0 auto;

margin-top: 25px;

}

.zhuce {

width: 100%;

height: 35px;

line-height: 35px;

background-color: coral;

text-align: center;

color: #fff;

margin-top: 25px;

}

.page {

height: 100%;

background-color: white;

}

.header {

background: #81a9c3;

justify-content: center;

align-items: center;

}

.header__title {

color: #fff;

font-size: 18px;

font-weight: bold;

height: 50px;

line-height: 50px;

}

.main {

flex: 1;

padding: 15px;

}

.h1 {

font-size: 24px;

}

.item {

flex-direction: row;

padding: 10px 0;

}

.item__text {

color: #333;

white-space: nowrap;

}

.item__value {

margin-left: 5px;

}

.footer {

background: #81a9c3;

flex-direction: row;

justify-content: center;

align-items: center;

}

.footer__text {

color: #fff;

font-size: 14px;

height: 30px;

line-height: 30px;

}

</style><img src="https://pica.zhimg.com/50/v2-43294afa3096611583b35e32c83b0883_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="2500" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pica.zhimg.com/v2-43294afa3096611583b35e32c83b0883_r.jpg?source=1940ef5c"/>2 > 登录接口链接：http://showdoc.deui.cn/web/#/27?page_id=364登录代码<template name='tpl'>

<safe-area class="header">

</safe-area>

<scroll-view class="main">

<view>

</view>

</div>

</div>

</scroll-view>

</div>

</view>

</template>

export default {

apiready() {

api.setStatusBarStyle({

style: "light",

color: "-"

});

var value = localStorage.getItem('uid');

api.openWin({

url: './home.stml'

});

data() {

return {

zhanghao: '',

password: '',

src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"

};

computed: {

methods: {

handleClick(e) {

api.openWin({

url: './region.stml',

pageParam: {

}

});

// api.toast({

// msg: this.data.text,

// location: "middle"

// });

var _this = this;

api.ajax({

url: 'http://yy.deui.cn/api.php/index/login',

method: 'get',

// headers: {

// 'Content-Type': 'application/json;charset=utf-8'

// },

data: {

body: {

username: _this.zhanghao,

password: _this.password

}

}, function (ret, err) {

console.log(JSON.stringify(ret))

localStorage.setItem('uid', ret.data.data[0]['id']);

if (ret.msg == '返回成功') {

api.toast({

msg: '登录成功',

location: "middle"

});

api.openWin({

url: './home.stml'

});

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}

};

</script>

<style>

.denglu {

margin-top: 10px;

font-size: 14px;

}

.touxiang {

margin-top: 10%;

width: 150px;

height: 150px;

border-radius: 100px;

margin: 0 auto;

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

}

.originImage {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 1;

}

.page {

/* position:fixed; */

position: relative;

z-index: 9;

width: 100%;

height: 100%;

}

.page1 {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 2;

}

input {

padding-left: 10px;

line-height: 35px;

height: 35px;

border-radius: 5px;

}

.zhanghao {

display: block;

margin: 0 auto;

margin-top: 15%;

margin-bottom: 15px;

height: 60px;

}

.mima {

display: block;

margin: 0 auto;

margin-top: 25px;

}

.zhuce {

width: 100%;

height: 35px;

line-height: 35px;

background-color: coral;

text-align: center;

color: #fff;

margin-top: 25px;

}

.page {

height: 100%;

background-color: white;

}

.header {

background: #81a9c3;

justify-content: center;

align-items: center;

}

.header__title {

color: #fff;

font-size: 18px;

font-weight: bold;

height: 50px;

line-height: 50px;

}

.main {

flex: 1;

padding: 15px;

}

.h1 {

font-size: 24px;

}

.item {

flex-direction: row;

padding: 10px 0;

}

.item__text {

color: #333;

white-space: nowrap;

}

.item__value {

margin-left: 5px;

}

.footer {

background: #81a9c3;

flex-direction: row;

justify-content: center;

align-items: center;

}

.footer__text {

color: #fff;

font-size: 14px;

height: 30px;

line-height: 30px;

}

</style><img src="https://pic4.zhimg.com/50/v2-043f357ec2bf8e5018bc053c55d13013_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="2500" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic1.zhimg.com/v2-043f357ec2bf8e5018bc053c55d13013_r.jpg?source=1940ef5c"/>（5）首页轮播图轮播图链接：http://showdoc.deui.cn/web/#/27?page_id=366<template name='tpl'>

<safe-area class="header">

</safe-area>

<scroll-view class="main" scroll-y>

<swiper class="swiper" id="customSwiper" autoplay circular indicator-dots indicator-color="#ddd"

indicator-active-color="#f0f">

<swiper-item class="swiper-item" v-for="(_item,_index) in bannerlist">

</swiper-item>

</swiper>

<div>

<a-cell-group>

<a-cell v-bind:title="_item.name" v-bind:value="_item.content" v-bind:label="_item.address"

arrow-direction="right" @click="godetial(_item)" v-for="(_item,_index) in shangjialist" />

</a-cell-group>

</div>

</scroll-view>

</div>

</view>

</template>

import ACellGroup from "../../components/act/a-cell-group";

import ACell from "../../components/act/a-cell";

export default {

data() {

return {

shangjialist: [],

bannerlist: [],

current: 0,

src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"

}

methods: {

apiready() {

this.banner()

this.allstores()

// var customSwiper = document.getElementById('customSwiper');

// customSwiper.load({

// data: this.data.dataList

// });

onchange(e) {

this.data.current = e.detail.current;

godetial(item) {

console.log(JSON.stringify(item))

api.openWin({

url: './detial.stml',

pageParam: {

id: item.id

}

});

banner() {

var _this = this;

api.ajax({

url: 'http://yy.deui.cn/api.php/index/banner',

method: 'get',

}, function (ret, err) {

if (ret.msg == '返回成功') {

_this.data.bannerlist = ret.data.data

// var customSwiper = document.getElementById('customSwiper');

// customSwiper.load({

// data: _this.data.bannerlist

// });

// console.log(JSON.stringify(_this.bannerlist))

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

allstores() {

var _this = this;

api.ajax({

url: 'http://yy.deui.cn/api.php/index/stores',

method: 'get',

}, function (ret, err) {

if (ret.msg == '返回成功') {

console.log(1)

console.log(JSON.stringify(ret.data.data))

console.log(1)

var obj = ret.data.data

for (let index = 0; index < obj.length; index++) {

const element = obj[index];

element['content'] = element['content'].substring(0, 9) + '...'

}

console.log(JSON.stringify(obj))

_this.data.shangjialist = obj

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}

</script>

<style>

.denglu {

margin-top: 10px;

font-size: 14px;

}

.touxiang {

margin-top: 10%;

width: 150px;

height: 150px;

border-radius: 100px;

margin: 0 auto;

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

}

.originImage {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 1;

}

.page {

/* position:fixed; */

position: relative;

z-index: 9;

width: 100%;

height: 100%;

}

.page1 {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 2;

}

input {

padding-left: 10px;

line-height: 35px;

height: 35px;

border-radius: 5px;

}

.zhanghao {

display: block;

margin: 0 auto;

margin-top: 15%;

margin-bottom: 15px;

height: 60px;

}

.mima {

display: block;

margin: 0 auto;

margin-top: 25px;

}

.zhuce {

width: 100%;

height: 35px;

line-height: 35px;

background-color: coral;

text-align: center;

color: #fff;

margin-top: 25px;

}

.page {

height: 100%;

background-color: white;

}

.header {

background: #81a9c3;

justify-content: center;

align-items: center;

}

.header__title {

color: #fff;

font-size: 18px;

font-weight: bold;

height: 50px;

line-height: 50px;

}

.main {

flex: 1;

padding: 0px;

}

.h1 {

font-size: 24px;

}

.item {

flex-direction: row;

padding: 10px 0;

}

.item__text {

color: #333;

white-space: nowrap;

}

.item__value {

margin-left: 5px;

}

.footer {

background: #81a9c3;

flex-direction: row;

justify-content: center;

align-items: center;

}

.footer__text {

color: #fff;

font-size: 14px;

height: 30px;

line-height: 30px;

}

.main {

width: 100%;

height: 100%;

}

.swiper {

width: 100%;

height: 190px;

/* background-color: blue; */

}

.swiper-item {

justify-content: center;

}

.title {

padding: 10px 0;

font-size: 20px;

}

.desc {

width: 100%;

text-align: center;

}

.container {

width: 100%;

height: 200px;

}

.indicator {

flex-direction: row;

justify-content: center;

position: absolute;

width: 100%;

height: 20px;

bottom: 8px;

}

.indicator-item {

width: 15px;

height: 8px;

margin: 3px;

}

.indicator-item-normal {

background-color: #ddd;

}

.indicator-item-active {

background-color: red;

}

</style>（6）首页列表所有店铺链接：http://showdoc.deui.cn/web/#/27?page_id=369上面的 5 的代码里面含有了。<a-cell-group>

<a-cell v-bind:title="_item.name" v-bind:value="_item.content" v-bind:label="_item.address" arrow-direction="right" @click="godetial(_item)" v-for="(_item,_index) in shangjialist" />

</a-cell-group>

shangjialist: [],

allstores() {

var _this = this;

api.ajax({

url: 'http://yy.deui.cn/api.php/index/stores',

method: 'get',

}, function (ret, err) {

if (ret.msg == '返回成功') {

console.log(1)

console.log(JSON.stringify(ret.data.data))

console.log(1)

var obj = ret.data.data

for (let index = 0; index < obj.length; index++) {

const element = obj[index];

element['content'] = element['content'].substring(0, 9) + '...'

}

console.log(JSON.stringify(obj))

_this.data.shangjialist = obj

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}<img src="https://pic1.zhimg.com/50/v2-442d8225cc032843f0d98fc2bda598b5_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="2500" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pica.zhimg.com/v2-442d8225cc032843f0d98fc2bda598b5_r.jpg?source=1940ef5c"/>（7）页面传参获取详情api.openWin({

url: './detial.stml',

pageParam: {

id: 123

}

});

apiready() {//like created

if (api.pageParam.id) {

this.data.id = api.pageParam.id

}

console.log(this.data.id)

}店铺详情：http://showdoc.deui.cn/web/#/27?page_id=370<template>

<view>

<a-nav-bar v-bind:title="title" left-text="返回" left-arrow @click-left="onClickLeft"

@click-right="onClickRight" />

</view>

<view>

<a-cell-group>

<a-cell title="名称" v-bind:value="store.name" />

<a-cell title="电话" v-bind:value="store.phone" />

<a-cell title="城市" v-bind:value="store.city" />

<a-cell title="地址" v-bind:value="store.address" />

<a-cell title="内容" v-bind:value="store.content" />

</a-cell-group>

<!-- <text text={{store.name}}></text>

</view>

<view>

<a-button type="success">产品</a-button>

</view>

<view>

<a-cell-group>

<a-cell v-bind:title="_item.name" v-bind:value="_item.content" label="点击可预约" v-for="(_item,_index) in product" @click="yuyuproduct(_item)" />

</a-cell-group>

</view>

</template>

import ACellGroup from "../../components/act/a-cell-group";

import ACell from "../../components/act/a-cell";

import ANavBar from "../../components/act/a-nav-bar";

import AButton from "../../components/act/a-button";

export default {

apiready() {//like created

if (api.pageParam.id) {

this.data.id = api.pageParam.id

}

console.log(this.data.id)

this.init()

data() {

return {

title: "详情",

id: 1,

store: {},

product:[]

}

methods: {

init() {

var _this = this;

api.ajax({

url: 'http://yy.deui.cn/api.php/index/searchstore',

method: 'get',

data: {

body: {

id: _this.data.id

}

}, function (ret, err) {

if (ret.msg == '返回成功') {

console.log(1)

console.log(JSON.stringify(ret.data.product))

console.log(1)

_this.data.store = ret.data.data[0]

_this.data.product = ret.data.product

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

yuyuproduct(_item){

console.log(JSON.stringify(_item))

onClickLeft() {

api.closeWin();

onClickRight() {

}

</script>

<style>

.page {

height: 100%;

}

</style>（8）导航栏组件import ANavBar from "../../components/act/a-nav-bar";

<view>

<a-nav-bar v-bind:title="title" left-text="返回" left-arrow @click-left="onClickLeft"

@click-right="onClickRight" />

</view>注意：导航栏组件的使用，文档中的引用import ACell from"../../components/act/a-nav-bar.stml";使用中建议去掉 stml 后缀，import ACell from"../../components/act/a-nav-bar";<img src="https://pic3.zhimg.com/50/v2-9faf4ceb47fc23d414fc57c828bdd807_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="2500" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://picx.zhimg.com/v2-9faf4ceb47fc23d414fc57c828bdd807_r.jpg?source=1940ef5c"/>（9）localStorage 对象使用main.stml 里面的这个，就是用的这个对象localStorage.setItem('uid', ret.data.data[0]['id']);下面是 localStorage 的用法// 设置存储.

sessionStorage.setItem('key', 'value');

// 获取存储.

var value = sessionStorage.getItem('key');

// 移除存储

sessionStorage.removeItem('key');

// 清除所有存储项

sessionStorage.clear();

// 获取已有存储项数

var length = sessionStorage.length;

// 根据存储项索引获取存储键名

var keyName = sessionStorage.key(index);（10）千语创想组件、模块的使用模块中添加模块，如果是 H5 的需要下载后，放到自己的代码中；如果是原生的模块，需要添加到自己应用中，去 require 去使用。网上有专门介绍这块的教程，不清楚的可以去搜搜。<img src="https://pic1.zhimg.com/50/v2-f4ddc0ea83bc85bfae4690268dd8394a_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="1125" data-rawheight="514" class="origin_image zh-lightbox-thumb" width="1125" data-original="https://pic1.zhimg.com/v2-f4ddc0ea83bc85bfae4690268dd8394a_r.jpg?source=1940ef5c"/>三、项目后台这块是自己写的 php 后台，用的 tp5 框架。<img src="https://pic1.zhimg.com/50/v2-425088987b5be698456c7d6ce30d8891_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="865" data-rawheight="391" class="origin_image zh-lightbox-thumb" width="865" data-original="https://picx.zhimg.com/v2-425088987b5be698456c7d6ce30d8891_r.jpg?source=1940ef5c"/>tp5 下的 fastadmin 框架，可以根据 fastadmin 一键生成简单后台，数据库文件为：后台接口代码<?php

namespace appapicontroller;

use appcommoncontrollerApi;

use thinkDb;

/**

* 首页接口

class Index extends Api

{

protected $noNeedLogin = ['*'];

protected $noNeedRight = ['*'];

/**

* 首页

public function index()

{

$this->success('请求成功');

}

//注册

public function re(){

$username = $this->request->request("username");

$password = md5($this->request->request("password"));

$sql = " INSERT INTO `yuyuuser` (`id`, `group_id`, `username`, `nickname`, `password`, `salt`, `email`, `mobile`, `avatar`, `level`, `gender`, `birthday`, `bio`, `money`, `score`, `successions`, `maxsuccessions`, `prevtime`, `logintime`, `loginip`, `loginfailure`, `joinip`, `jointime`, `createtime`, `updatetime`, `token`, `status`, `verification`) VALUES (NULL, '0', '', '".$username ."', '".$password."', '', '', '', '', '0', '0', NULL, '', '0.00', '0', '1', '1', NULL, NULL, '', '0', '', NULL, NULL, NULL, '', '', '')";

$rst = Db::query($sql);

$data =1;

$this->success('返回成功', ['data' => $data]);

}

//登录

public function login(){

$username = $this->request->request("username");

$password = md5($this->request->request("password"));

$sql = "SELECT nickname,id FROM yuyuuser where nickname='".$username."' and password='".$password."' order by id DESC LIMIT 1";

$rst = Db::query($sql);

$this->success('返回成功', ['data' => $rst]);

}

//获取轮播图

public function banner()

{

$sql = "SELECT * FROM `yuyubanner`";

$rst = Db::query($sql);

$this->success('返回成功', ['data' => $rst]);

}

//获取网络协议

public function xieyi()

{

$sql = "SELECT * FROM `yuyuxieyi`";

$rst = Db::query($sql);

$this->success('返回成功', ['data' => $rst]);

}

//所有类型

public function leixing()

{

$sql = " SELECT * FROM `yuyutype`";

$rst = Db::query($sql);

$this->success('返回成功', ['data' => $rst]);

}

//所有店面

public function stores()

{

$sql = " SELECT * FROM `yuyustore`";

$rst = Db::query($sql);

$this->success('返回成功', ['data' => $rst]);

}

//店铺信息

public function searchstore()

{

$id = $this->request->request("id");

$sql = " SELECT * FROM `yuyustore` where id = ".$id;

$sql1 = "SELECT * FROM `yuyuproduct` where store_id = ".$id;

$rst = Db::query($sql);

$rst1 = Db::query($sql1);

$this->success('返回成功', ['data' => $rst,'product'=>$rst1]);

}

立即体验：AVM框架

转载请注明来自：https://www.qianyuthink.com/news/7856.html

上一页：如何实现App文档下载和预览功能
下一页：一款好的低代码开发平台应具备什么？