微信小程序

简介

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

优缺点

优点
1、对用户使用上来说，确实方便，要用的时候打开，不用的时候关掉，即用即走。这点比需要下载，还要占用手机内存空间的APP要好。
2、主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP。
3、可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。
4、在安卓手机上可以添加到手机桌面，看上去跟原生APP差不多，但仅限安卓手机，iphone就不行了。
5、运行速度跟APP差不多，也能做出很多H5不做到的功能，开发成本跟H5差不多，相对来说开发成本比APP要低。
缺点
1、微信小程序只有1M的大小，这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。
2、小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护。
3、不能跳转外链网址，所以间接影响了小程序的开放性。
4、不能直接分享到朋友圈，哎呀，少了一个重要的推广方式。
5、需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些。

电商项目

配置小程序
全局配置

{"pages": ["pages/index/index","pages/logs/index"   //添加tab（数量在2~5）],"window": {"navigationBarTitleText": "Demo"//导航栏标题文字内容    },"tabBar": {//tab页面的配置"list": [{"pagePath": "pages/index/index","text": "首页" "iconPath":"" //小图标}, {"pagePath": "pages/logs/index","text": "日志"}]},"networkTimeout": {//各类网络延迟"request": 10000,"downloadFile": 10000},"debug": true,//调试debug"navigateToMiniProgramAppIdList": [  //id"wxe5f52902cf4de896"]
}

页面配置

{"navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色，如f66"navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white"navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容    "backgroundColor": "#eeeeee",//窗口的背景色"backgroundTextStyle": "light" //下拉 loading 的样式，仅支持 dark / light
}

购物车流程
1、全选功能

 allselected () {this.allchecked = !this.allcheckedconsole.log(this.allchecked)// 如果为真，修改数据的每一项的flag的值都为真，否则都为假if (this.allchecked) {this.cartlist.map( item => {item.flag = true})} else {this.cartlist.map( item => {item.flag = false})}},selected (item) {console.log('test', item)item.flag = !item.flagconsole.log(this.cartlist)// 如果单独某一项没被选中，那么全选一定不被选中// 如果单独某一项被选中了，检测其他项是否都被选中，如果都选中了，全选被选中if(!item.flag) {this.allchecked = false} else {// 检测其余项是否被选中 --- 一假则假const test = this.cartlist.every(item => {return item.flag === true})if (test) {this.allchecked = true} else {this.allchecked = false}}},

减数功能

 reduce (item) {// 如果当前的个数为1 不操作，如果大于1减1操作let num = item.numif (num > 1) {num -= 1} else {num = 1}let token = uni.getStorageSync('token')request({url: '/cart/update',data: {token,cartid: item.cartid, // item包含购物车记录idnum}}).then(res => {if (res.data.code === '10019') {toast({title:'请先登录'})uni.navigateTo({url: '/pages/login/login'})} else {toast({title:'修改数量成功'})item.num -= 1 // 服务器返回成功之后  视图才更新}})},

加数

  add (item) {// item.num += 1// 加1let num = item.numnum += 1let token = uni.getStorageSync('token')request({url: '/cart/update',data: {token,cartid: item.cartid, // item包含购物车记录idnum}}).then(res => {if (res.data.code === '10019') {toast({title:'请先登录'})uni.navigateTo({url: '/pages/login/login'})} else {toast({title:'修改数量成功'})item.num += 1 // 服务器返回成功之后  视图才更新}})},

删除功能

  del (item,index) {let token = uni.getStorageSync('token')request({url: '/cart/delete',data: {token,cartid: item.cartid}}).then(res => {if (res.data.code === '10019') {toast({title:'请先登录'})uni.navigateTo({url: '/pages/login/login'})} else {toast({title:'删除数据成功'})this.cartlist.splice(index, 1) // 删除当前的数据// 如果点击删除 删完之后要显示没有数据了this.cartlist.length === 0 ? this.flag = true : this.flag = false}})}

总数功能

  totalNum () {let totalNum = 0;this.cartlist.map(item => {item.flag ? totalNum += item.num : totalNum += 0})return totalNum},

总价格功能

 totalPrice () {let totalPrice = 0;this.cartlist.map(item => {item.flag ? totalPrice += item.num * item.price : totalPrice += 0})return totalPrice}

逆战———微信小程序相关推荐

逆战之微信小程序全局配置
微信小程序之全局配置-1 小程序的配置分为全局配置.页面配置及sitemap 配置全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以 ...
微信小程序开发的全局配置和局部配置（逆战）
全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置. 全局配置页面配置每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置.页面中配置项在当前页面会 ...
微信小程序疫情期间逆战学习--全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了部分常用配置选项的 app.json {&q ...
逆战--关于微信小程序
微信小程序的常用配置: 全局配置: //app.json: {"pages": ["pages/index/index","pages/logs/in ...
逆战之微信小程序云开发
概述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发 ...
初识小程序 ——微信小程序的入门和使用
一.小程序的介绍在小程序特别火爆的今天,我们一起来了解了解小程序吧.小程序总类一般分为微信小程序.支付宝小程序.头条小程序.百度小程序.QQ小程序,小程序无需下载安装,能达到"触手可及&q ...
关于微信小程序的开发体验
目录前言我对小程序的看法小程序开发 3.1 全局配置 3.2 页面配置 3.3 组建的创建和使用 3.4 路由的配置总结前言# 一场突如其来的疫情,打破了许多人的计划,也让许多公司无法正常运 ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...

逆战———微信小程序

微信小程序

简介

优缺点

电商项目

逆战———微信小程序相关推荐

最新文章

热门文章