小程序实现像京东一样的上拉查看图文详情

小程序实现像京东一样的上拉查看图文详情,第1张

这就要看你是想获取解决方案还是编程技术了。

扩展内容:

企业有三种方式可以开发微信小程序

第一种,为了节省费用,老板自己研究看能否弄个免费的小程序,5%的小程序是通过这种方式实现的,不过这种小程序功能残缺,自己做一个玩玩是可以的,作为商业用途还是太弱了,功能不齐全、用户体验差;

第二种,公司自己有技术团队,让他们研发小程序,15%的小程序是通过这种方式开发的;但是这种开发方式呢,开发费用太高,而且需要花费大量的时间、人力,也不可取;

第三种,通过专业的第三平台开发一个小程序,80%的小程序是通过外包实现的,开发价格较低,根据功能一般几千,或者一两万就可以实现,还有就是开发周期短。

小红书小程序appid获取需要点击进入需要查看AppID的小程序;

2、点击小程序右上角三个点点,从底部出现d窗;

3、点击d窗顶部小程序名称,进入小程序详情页;

4、点击小程序详情页中的更多资料;

5、更多资料的基本信息中,即可获取小程序AppID。

效果展示

通过使用事件中心的查询事件,配置一个活动列表展示页。

参考文章“网页链接”,同时配置界面跳转和跳转页面的数据绑定完成活动详情页的展示。

创建数据表

注意:在数据中心你可以创建属于自己应用程序的数据表格。数据表格类型分为用户表、商品表、订单表和自定义表。

在活动数据表,新增一个富文本字段“活动详情”

触发器配置

注意:在检查器面板中的触发器设置面板创建触发器,可以对组件进行交互逻辑设置,或配合事件来进行动态数据 *** 作。

选中循环容器的列表条目。

点击检查面板中的触发器。

创建触发器。

绑定数据

注意:排定数据可以将事件返回的数据和组件显示内容进行绑定

选中组件。

点击检查面板中的数据绑定与设置。

绑定数据。

选中标签文本组件。

点击检查面板中的数据绑定与设置。

绑定数据。

选中富文本组件。

点击检查面板中的数据绑定与设置。

绑定数据。

先做小程序“我的”页面,需要注意的有两个点:

先上图,有图才有真相:

这一块我增加了一个隐藏的button, 未获取到用户信息时,显示为默认头像和“微信授权”的文字提示,登陆后,头像变为微信头像,文字变为微信昵称。

具体ui为判断没有授权则显示默认头像及提示,并在其上层覆盖一个透明的button,用户触发授权事件。

在js中需要注意的是,open-type="getUserInfo"需要做老版本兼容,老版本通过wxgetUserInfo即可唤起授权页面,不需要添加button去触发

详情见下一篇: 微信小程序:“我的”页面布局(二):可配置功能菜单列表

微信小程序:“我的”页面布局(一):微信用户信息获取及UI

微信小程序:“我的”页面布局(二):可配置功能菜单列表

1 获取openid

11 获取code

首先我们要调用接口来获取登录凭证,也就是code,从而获取用户们登录的状态信息,其中有一个唯一标示,就是openid,还有我们登录要用到的钥匙(session_key)。用户的基本数据我们都要用到钥匙来获取数据。

wxlogin({

//获取code

success: function(res) {

code = rescode //返回code

}

})

12 获取openid

拿到上一步获取的code,结合小程序 appid 和 secret 请求接口apiweixinqqcom/sns/jscode2sessionappid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 换取openid,与 openid 一同被返回的,还包括 session_key,其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。

wxrequest({

url: 'apiweixinqqcom/sns/jscode2sessionappid=APPID&secret=SECRET&js_code='+ code +'&grant_type=authorization_code',

data: {},

header: {

'content-type': 'application/json'

},

success: function(res) {

openid = resdataopenid //返回openid

}

})

2 获取用户信息

21 在appjs中创建该全局方法

//appjs

getUserInfo:function(cb){

var that = this

if(thisglobalDatapersonInfo){

typeof cb == "function" && cb(thisglobalDatapersonInfo)

}else{

//调用登录接口

wxlogin({

success: function () {

wxgetUserInfo({

success: function (res) {

thatglobalDatapersonInfo = resuserInfo

typeof cb == "function" && cb(thatglobalDatapersonInfo)

}

})

}

})

}

}

22 实例化全局方法获取用户信息

var that = this;

//调用应用实例的方法获取全局数据

appgetUserInfo(function (personInfo) {

//更新数据

thatsetData({

personInfo: personInfo

})

})

以上就是关于小程序实现像京东一样的上拉查看图文详情全部的内容,包括:小程序实现像京东一样的上拉查看图文详情、小红书小程序appid获取、小程序里边怎么配置那种活动列表跳转活动详情的功能啊等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/9850907.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存