微信小程序小结02-- 完整的demo
小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能。按朋友的意思,做了一次调整,分成了首页、预约和我的三个页面。
下面说下遇到的几个问题。
01.客服功能
不得不说这个一条龙服务的功能挺好的,帮住小店主开辟了一个客源路径,节省了开发的成本。只需要在页面里,放置一个contact-button就可以
<contact-button type="default-light" size="20" session-from="weapp" >客服 </contact-button>
只是这个button的样式不好修饰,还自带图标。不喜。就可以换成button。
<button class="cs_button" open-type="contact" session-from="weapp">客服</button >
设置类型为contact就好。这样用户点击就能进入客服会话页面,
在用户的微信聊天记录中会出现新的一栏:小程序客服消息
然后在小程序后台设置客服人员,在指定的pc页面上扫码登录就能接入会话了。 客服地址:https://mpkf.weixin.qq.com/cgi-bin/kfindex
可惜这个地址不能在手机上用,如果可以集成到客服人员的用户里面最好了。在pc的网页上是比较麻烦的,因为小店主自己也不会一直在那登录,如果手机上收到消息能提示最好了,不然就很鸡肋。另外客服需要先在小程序后台绑定客服人员,注意如果微信设置了不能搜索,到这个地方也是搜不到的。
02.获取用户登录信息
这个功能一开始是好的,过了几天不知道怎么就获取不到用户信息了。然后按照文档意思,需要让用户再次点击button授权才可以。
<view wx:if="{{isAuth}}" class="container short"><view class='avatar-box'><image class="user-avatar" src="{{ userInfo.avatarUrl }}" /></view><text class="title">{{ userInfo.nickName }}</text> </view><button wx:if="{{!isAuth}}" open-type="getUserInfo">授权登录</button>
isAuth是加载的时候判断有没有 res.authSetting['scope.userInfo'] 这个权限,没有就为false。这样才能再次获取用户信息。
03.图片自适应
一开始在页面怎么调整css,图片的宽高比都失真,无奈之余去看了才晓得,这个居然也有暗门。
<image class="img" bindtap="previewImage" src="data:images/actv.jpg" mode="widthFix">
需要加上mode才能自适应。这真是伤悲,为啥不是默认配置。
04.拨打电话
call:function(){wx.makePhoneCall({phoneNumber: phone })},
这个功能实用,直接跳转到用户手机拨打电话的界面。
05.页面后退的问题
在页面导航的时候,非tarbar页面我们希望能够有个回退键,其实这是默认的。用navigator标签就好。
<navigator url="/pages/location/location" ><image class='icon s' src='../../images/w1.png'></image> 门店位置</navigator>
但我一开始拿来代码的时候傻逼了,navigator(相当于是a标签) 加了一个redirect的。结果就是又去无回...
小结:开发这种纯展示的不需要域名和服务器,这是快哉。另外就是阿里的这个图标用的很爽。
github地址:https://github.com/stoneniqiu/weapp-demo
微信小程序小结02-- 完整的demo相关推荐
- 微信小程序开发的完整流程介绍,新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
- 微信小程序云开发完整案例
微信小程序云开发完整案例 本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...
- 微信小程序大转盘完整代码
微信小程序大转盘完整代码 效果图 wxml片段 <!--index.wxml--> <view class="container"><image sr ...
- 微信小程序之支付密码输入demo
微信小程序之支付密码输入demo 原文链接:https://www.cnblogs.com/tandaxia/p/9338443.html 在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要 ...
- 【非常基础实践】 微信小程序 - 腾讯云 - PHP - DEMO - 002 - 云环境搭建和开通指引- 实践
前言: 微信小程序最快捷的方式应该还是利用腾讯云做后台,本文对开启微信小程序和腾讯云的绑定实践了一下. 包括安装,开通,开发环境配置,生产环境配置.很大一部分内容来自官网 1 注册微信小程序(官网贴图 ...
- 微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
- 职工线上健步走活动小程序方案,通过微信小程序实现功能,getElementById(“demo“).innerHTML=x
<script> function myFunction() {y=5;z=2;x=y+z;document.getElementById("demo").innerH ...
- 很好的微信小程序小结
一.小程序文档笔记 默认开发目录 开发目录解析 1. app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 js ...
- 微信小程序 + Java + Mysql(登录 Demo)
目录 一.开发前准备 二.设计登录页面(小程序) 三.创建 Maven 项目 四.创建数据库与数据表 五.后台代码(Java Servlet) 六.运行 七.总结 建议 一.开发前准备 1.注册一个微 ...
- 微信小程序开发02 授权模型: 小程序的用户体系与 OAuth 规范
你好,我是俊鹏,今天我想跟你聊一下微信小程序的授权模型. 登录认证是一个完整应用必备的模块,除非你的应用程序不需要任何与用户相关的功能(比如hao123 这种静态导航网站一般不会涉及用户体系).很多人 ...
最新文章
- Inno Setup使用教程大全
- meanshift算法 java_Meanshift,聚类算法
- Java 数组插入元素
- kex_exchange_identification: Connection closed by remote host Connection closed by 140.82.121.3 port
- C++案例:C++版生命游戏
- 英语学习笔记2019-11-01
- 在千锋学前端的卢同学“不甘于落后,不安于现状”
- Pickle Finance:BAC-DAI Pickle Jar将在迁移到BAS v2后更新
- java取整数位_java获取整数的各位数值
- 6.Python学习笔记:[enumerate元素加序号;isdigit()像数字;len()计算长度]
- go - struct
- 温故而知新:查看端口占用情况以及DOS中的管道操作/重定向操作
- 用 Python 写一个 NoSQL 数据库
- python numpy diff_Python numpy.uint16方法代码示例
- AppScan安装教程
- mt950报文解析_MT700报文升级内容逐项解析
- 中医药天池大数据竞赛——中医文献问题生成挑战(二)
- oracle 波浪号不识别,键盘波浪号“~”打不出,一直打成±,但安全模式却正常打出...
- php orc 验证码,百度图片识别orc实现普通验证码识别
- ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)