底部附导航：小程序所有组件效果示例，供查阅。
1、小程序授权登录：
登录方式一：code登录：
wx.login({
success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId
var code = res.code;
var opt = {
url: '',
method: 'post',
data: {
code: res.code
}
}
app.globalData.getData(opt, (res) => {
if (res.data.status == 1) {
//登录成功的逻辑，存储一些信息，即使用code查到openid
} else {
//登录失败，即当前用户不存在，即使用code未查到openid
}
}, (res) => {
console.log(res)
})
}
})
登录方式二：账号密码登录：已有账号，但未绑定小程序openid
wx.login({
success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId
var code = res.code;
wx.getUserInfo({ //此时登录按钮由button open-type="getUserInfo"伪装
success(res) {
console.log(res) //小程序授权获取到的用户信息
var opt = {
url: '',
method: 'post',
data: {
code : code //使用code查询openid，直接绑定当前账号
}
}
app.globalData.getData(opt, (res) => {
if (res.data.status == 1) {
//登录成功执行操作
} else {
that.showToast(res.data.msg)
}
}, (res) => {
console.log(res)
})
}
})
}
})
登录方式三：验证码登录：已有账号，但未绑定小程序openid
同上，code用来绑定用户身份
2、懒加载配置
//json文件
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 100,
}
//js文件
onReachBottom: function () {
this.ajax()
}
//页面data
{
data:[],
page:1
}
//ajax()
var that = this;
wx.request({
url: '',
method: 'post',
data: {},
success(res) {
if (res.data.status == 1){
that.setData({
page:that.data.page +1,
data:that.data.data.concat(res.data.data),
})
}
},
fail(res) {
}
})
3、获取地理位置坐标，转换成省市区详细地址
//1、腾讯位置服务申请账号
//2、app.json文件声明如下：
"permission": {
"scope.userLocation": {
"desc": "您的位置信息将用于提供服务"
}
}
//3、js文件中
const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
data: {},
onLoad: function (options) {
qqmapsdk = new QQMapWX({
key: '' //腾讯位置服务提供的key
})
this.getPosition();
},
getPosition:function(){
wx.getLocation({
type: 'wgs84',
success(res) {
var latitude = res.latitude //获取到经纬度
var longitude = res.longitude
that.getLocal(latitude, longitude)
}
})
},
getLocal: function (latitude, longitude) {
let that = this;
qqmapsdk.reverseGeocoder({ //经纬度解析出实际地理位置
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
console.log(res)
let province = res.result.ad_info.province
let city = res.result.ad_info.city
that.setData({
province: province,
city: city,
latitude: latitude,
longitude: longitude
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
// console.log(res);
}
});
},
})
4、小程序模板template，主要用于相同或相似列表渲染，复用
//使用方式示例：商品列表
//template.wxml 定义模板，样式写在app.wxss里
<template name='lists'>
<view class='list' wx:for='{{datas}}' wx:key="{{item.id}}" bindtap='' data-id='{{item.id}}'>
<view class='imgBox'>
<image src='{{url}}{{item.img}}' class='listImg' mode="widthFix"></image> //控制宽度，高度自适应
</view>
<view class='listName'>{{item.name}}</view>
<view class='listDesc'>{{item.desc}}</view>
</view>
</template>
//页面引用，index.wxml
<view> //view里面is填写要使用的上面的模板名字，data传入模板要渲染的数据，与上面模板渲染for循环的数据同名
<template is="lists" data="{{datas}}"/>
</view>
//页面底部导入template模板文件
<import src="../template/template.wxml"/>
//js中定义商品列表数据
Page({
data: {
datas:[]
},
onLoad: function () {},
})
5、小程序实现分享
// 小程序分享商品到小程序，wechat => wechat
// js文件自定义分享内容
onShareAppMessage: function (options) {
var that = this;
var shareObj = {
title: '这里是分享标题',
path: '/pages/login/login?a=1&b=2', //这里是分享的路径，可以带参数
imageUrl: '这里是分享自定义图片地址',
success: function (res) {
if (res.errMsg == 'shareAppMessage:ok') {
}
},
fail: function () {
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败，其中 detail message 为详细失败信息
}
},
complete: function () {
}
}
// 来自页面内的按钮的转发
if (options.from == 'button') {
var eData = options.target.dataset;
shareObj.title = '这里是分享的标题',
shareObj.path = '/pages/login/login?a=1&b=2';
}
return shareObj;
},
// app调用小程序，并分享商品，app => wechat
// app端需要在腾讯开放平台关联小程序，然后调用小程序的路径和参数同上，
//req.miniprogramType=0,1,2 分别代表拉起正式版，开发版，体验版
其他
//1、图片高度自适应：
<image src='' mode="widthFix"></image> //width:100%，高度自适应
//2、超出显示省略号，效果见下方图片
.line1{ /* 控制单行超出显示省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.line2{ /* 控制最多两行显示省略号 */
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;
text-overflow:ellipsis;
}
.line3{ /* 控制最多三行显示省略号 */
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
text-overflow:ellipsis;
}
多行超出省略号.png
网友评论