微信小程序之知乎日报源码

上一次的《微信小程序之小豆瓣图书》制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识。而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多。在我编写这个DEMO之前,网上已经有很多网友弄出了相同的DEMO,也是非常不错的,毕竟这个案例很经典,有比较完整的API,很值得模仿学习。本次个人的DEMO也算是一次小小的练习吧。

由于知乎日报是一个资讯类的App,UI的布局主要是以资讯列表页、资讯详情页和评论页为主,当然本次也附带了应用设置页,不过现阶段功能尚未编写,过段时间会更新补充,继续完善。

API分析

本次应用使用了知乎日报的API,相比上次豆瓣图书的数量比较多了,但是部分仍然有限制,而且自己没有找到评论接口的分页参数,所以评论这块没有做数据的分页。

以下是使用到的具体API,更加详细参数和返回结构可参照网上网友分享的 知乎日报-API-分析 ,在此就不做再次分析了。

启动界面图片

http://news-at.zhihu.com/api/4/start-image/{size}

参数说明
size获取刚进入应用时的显示封面,可以根据传递的尺寸参数来获取适配用户屏幕的封面。

获取最新日报


http://news-at.zhihu.com/api/4/news/latest

返回的数据用于日报的首页列表,首页的结构有上下部分,上部分是图片滑动模块,用于展示热门日报,下部分是首页日报列表,以上接口返回的数据有热门日报和首页日报

获取日报详细

http://news-at.zhihu.com/api/4/news/{id}

参数说明
id在点击日报列表也的日报项时,需要跳转到日报详情页展示日报的具体信息,这个接口用来获取日报的展示封面和具体内容。

历史日报


http://news.at.zhihu.com/api/4/news/before/{date}

参数说明
date这个接口也是用与首页列表的日报展示,但是不同的是此接口需要传一个日期参数,如20150804格式。获取最新日报接口只能获取当天的日报列表,如果需要获取前天或者更久之前的日报,则需要这个接口单独获取。

日报额外信息


http://news-at.zhihu.com/api/4/story-extra/{id}

参数说明
id在日报详情页面中,不仅要展示日报的内容,好需要额外获取此日报的评论数目和推荐人数等额外信息。

日报长评


http://news-at.zhihu.com/api/4/story/{id}/long-comments

参数说明
id日报的评论页面展示长评用到的接口(没有找到分页参数,分页没有做)

日报短评


http://news-at.zhihu.com/api/4/story/{id}/short-comments

参数说明
id日报的评论页面展示段评用到的接口(没有找到分页参数,分页没有做)

主题日报栏目列表


http://news-at.zhihu.com/api/4/themes

主页的侧边栏显示有主题日报的列表,需要通过这个接口获取主题日报栏目列表

主题日报具体内容列表

http://news-at.zhihu.com/api/4/theme/{themeId}

参数说明
themeId在主页侧栏点击主题日报进入主题日报的内容页,需要展示此主题日报下的日报列表。

代码编写

启动页


作为一个仿制知乎日报的伪APP,高大上的启动封面是必须的,哈哈。启动页面很简单,请求一个应用启动封面接口,获取封面路径和版权信息。当进入页面,在onLoad事件中获取屏幕的宽和高来请求适合尺寸的图片,在onReady中请求加载图片,在请求成果之后,延迟2s进入首页,防止页面一闪而过。

onLoad: function( options ) {
var _this = this;
wx.getSystemInfo( {
success: function( res ) {
_this.setData( {
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});},onReady: function() {
var _this = this;
var size = this.data.screenWidth + '*' + this.data.screenHeight;
requests.getSplashCover( size, ( data ) => {
_this.setData( { splash: data });
}, null, () => {
toIndexPage.call(_this);
});}
/** * 跳转到首页 */function toIndexPage() {
setTimeout( function() {
wx.redirectTo( {
url: '../index/index'
});
}, 2000 );}

首页

轮播图

首页顶部需要用到轮播图来展示热门日报,小程序中的Swipe组件可以实现。

{{item.title}}

所有的内容都必须要在swiper-item标签中,因为我们的图片不止有一张,而是有多个热门日报信息,需要用循环来展示数据。这里需要指定的是image里的属性mode设置为aspectFill是为了适应组件的宽度,这需要牺牲他的高度,即有可能裁剪,但这是最好的展示效果。toDetailPage是点击事件,触发跳转到日报详情页。在跳转到日报详情页需要附带日报的id过去,我们在循环列表的时候把当前日报的id存到标签的data中,用data-id标识,这有点类似与html5中的data-*API。当在这个标签上发生点击事件的时候,我们可以通过Event.currentTarget.dataset.id来获取data-id的值。

日报列表

列表的布局大同小异,不过这里的列表涉及到分页,我们可以毫不犹豫地使用scroll-view组件,它的scrolltolower是非常好用的,当组件滚动到底部就会触发这个事件。上次的小豆瓣图书也是使用了这个组件分页。不过这次的分页动画跟上次不一样,而是用一个附带旋转动画的刷新图标,使用官方的动画api来实现旋转。

 0}}>{{it.value}}{{it.value}}{{it.value}}{{it.value}}{{it.value}}查看知乎讨论

可以看出模版中的内容展示部分用了蛮多的block加判断语句wx:if wx:elif wx:else。这些都是为了需要根据解析后的内容类型来判断需要展示什么标签和样式。解析后的内容大概格式是这样的:

{
body: [
 title: '标题',
 author: '作者', 
 bio: '签名', 
 avatar: '头像', 
 more: '更多地址',
 content: [ //内容
{
type: 'p',
value: '普通段落内容'
},
{
type: 'img',
value: 'http://xxx.xx.xx/1.jpg'
},
{
type: 'pem',
value: '...'
},
...
 ]
],
...}

需要注意的一点是主题日报有时候返回的html内容是经过unicode编码的不能直接显示,里边全是类似&#xxxx;的字符,这需要单独为主题日报的日报详情解析编码。

再点击主题日报中的列表项是,传递一个标记是主题日报的参数theme

//跳转到日报详情页toDetailPage: function( e ) {
var id = e.currentTarget.dataset.id;
wx.navigateTo( {
url: '../detail/detail?theme=1&id=' + id});},

然后在Detail.js的onLoad事件中接受参数

//获取列表残过来的参数 id:日报id, theme:是否是主题日报内容(因为主题日报的内容有些需要单独解析)onLoad: function( options ) {
var id = options.id;
var isTheme = options[ 'theme' ];
this.setData( { id: id, isTheme: isTheme });},

之后开始请求接口获取日报详情,并根据是否是主题日报进行个性化解析

//加载页面相关数据function loadData() {
var _this = this;
var id = this.data.id;
var isTheme = this.data.isTheme;
//获取日报详情内容
_this.setData( { loading: true });
requests.getNewsDetail( id, ( data ) => {
data.body = utils.parseStory( data.body, isTheme );
_this.setData( { news: data, pageShow: 'block' });
wx.setNavigationBarTitle( { title: data.title }); //设置标题
}, null, () => {
_this.setData( { loading: false });
});}

以上传入一个isTheme参数进入解析方法,解析方法根据此参数判断是否需要进行单独的编码解析。

内容解析的库代码比较多,就不贴出了,可以到git上查看。这里给出解析的封装。

var HtmlParser = require( 'htmlParseUtil.js' );String.prototype.trim = function() {
return this.replace( /(^\s*)|(\s*$)/g, '' );}String.prototype.isEmpty = function() {
return this.trim() == '';}/** * 快捷方法 获取HtmlParser对象 * @param {string} html html文本 * @return {object} HtmlParser */function $( html ) {
return new HtmlParser( html );}/** * 解析story对象的body部分 * @param {string} html body的html文本 * @param {boolean} isDecode 是否需要unicode解析 * @return {object} 解析后的对象 */function parseStory( html, isDecode ) {
var questionArr = $( html ).tag( 'div' ).attr( 'class', 'question' ).match();
var stories = [];
var $story;
if( questionArr ) {
for( var i = 0, len = questionArr.length;i < len;i++ ) {
$story = $( questionArr[ i ] );
stories.push( {
title: getArrayContent( $story.tag( 'h2' ).attr( 'class', 'question-title' ).match() ),
avatar: getArrayContent( getArrayContent( $story.tag( 'div' ).attr( 'class', 'meta' ).match() ).jhe_ma( 'img', 'src' ) ),
author: getArrayContent( $story.tag( 'span' ).attr( 'class', 'author' ).match() ),
bio: getArrayContent( $story.tag( 'span' ).attr( 'class', 'bio' ).match() ),
content: parseStoryContent( $story, isDecode ),
more: getArrayContent( getArrayContent( $( html ).tag( 'div' ).attr( 'class', 'view-more' ).match() ).jhe_ma( 'a', 'href' ) )});
}
}
return stories;}/** * 解析文章内容 * @param {string} $story htmlparser对象 * @param {boolean} isDecode 是否需要unicode解析 * @returb {object} 文章内容对象 */function parseStoryContent( $story, isDecode ) {
var content = [];
var ps = $story.tag( 'p' ).match();
var p, strong, img, blockquote, em;
if( ps ) {
for( var i = 0, len = ps.length;i < len;i++ ) {
p = ps[ i ]; //获取的内容
if( !p || p.isEmpty() )continue;

img = getArrayContent(( p.jhe_ma( 'img', 'src' ) ) );
strong = getArrayContent( p.jhe_om( 'strong' ) );
em = getArrayContent( p.jhe_om( 'em' ) );
blockquote = getArrayContent( p.jhe_om( 'blockquote' ) );

if( !img.isEmpty() ) { //获取图片
content.push( { type: 'img', value: img });
}
else if( isOnly( p, strong ) ) { //获取加粗段落...strong = decodeHtml( strong, isDecode );
if( !strong.isEmpty() )content.push( { type: 'pstrong', value: strong });
}
else if( isOnly( p, em ) ) { //获取强调段落 ...em = decodeHtml( em, isDecode );
if( !em.isEmpty() )content.push( { type: 'pem', value: em });
}
else if( isOnly( p, blockquote ) ) { //获取引用块 ...blockquote = decodeHtml( blockquote, isDecode );
if( !blockquote.isEmpty() )content.push( { type: 'blockquote', value: blockquote });
}
else { //其他类型 归类为普通段落 ....太累了 不想解析了T_T
p = decodeHtml( p, isDecode );
if( !p.isEmpty() )content.push( { type: 'p', value: p });
}
}
}
return content;}/** * 取出多余或者难以解析的html并且替换转义符号 */function decodeHtml( value, isDecode ) {
if( !value ) return '';
value = value.replace( /]+>/g, '' )
.replace( / /g, ' ' )
.replace( /“/g, '' )
.replace( /”/g, '' ).replace( /·/g, '·' );
if( isDecode )return decodeUnicode( value.replace( /&#/g, '\\u' ) );
return value;}/** * 解析段落的unicode字符,主题日报中的内容又很多是编码过的 */function decodeUnicode( str ) {
var ret = '';
var splits = str.split( ';' );
for( let i = 0;i  0 ) { //解析类似7.1 \u20998 参杂其他字符
target = target[ 0 ];
var temp = value.replace( target, '{{@}}' );
target = target.replace( '\\u', '' );
target = String.fromCharCode( parseInt( target ) );
return temp.replace( {{@}}, target );
} else {
// value = value.replace( '\\u', '' );
// return String.fromCharCode( parseInt( value, '10' ) )
return value;
}}/** * 获取数组中的内容(一般为第一个元素) * @param {array} arr 内容数组 * @return {string} 内容 */function getArrayContent( arr ) {
if( !arr || arr.length == 0 ) return '';
return arr[ 0 ];}function isOnly( src, target ) {
return src.trim() == target;}module.exports = {
parseStory: parseStory}

代码的解析过程比较繁杂,大家可以根据返回的html结构和参照解析库的作者写的文章来解读。

底部工具栏

一般资讯APP的详情页都有一个底部的工具栏用于操作分享、收藏、评论和点赞等等。为了更好地锻炼动手能力,自己也做了一个底部工具栏,虽然官方的APP并没有这个东西。前面介绍到的获取额外信息API在这里就被使用了。本来自己是想把推荐人数和评论数显示在底部的图片右上角,但是由于本人的设计问题,底部的字号已经是很小了,显示数量的地方的字号又不能再小了,这样看起来数字显示的地方和图标的大小几乎一样,很是别扭,所以就不现实数字了。这块还是有很多待完善的功能的,比较收藏功能和是否有评论提示功能等。

底部有分享、收藏、评论和点赞按钮,分享肯定是做不了啦,哈哈,但是效果还是需要有的,就一个modal弹窗,显示各类社交应用的图标就行啦。

model的隐藏和显示都是通过hidden属性来控制。

底部工具栏中还有一个按钮是刷新,其实就是一个重新调用接口请求数据的过程而已。

//重新加载数据reloadEvent: function() {
loadData.call( this );},

评论页面

评论页面蛮简单的,就是展示评论列表,但是要展示两部分,一部分是长评,另一部分是短评。长评跟短评的布局都是通用的。进入到评论页面时,如果长评有数据,则先加载长评,短评需要用户点击短评标题才加载,否则就直接加载短评。这需要上一个详情页面中传递日报的额外信息过来(即长评数量和短评数量)。

之前已经在日报详情页面中,顺便加载了额外的信息

//请求日报额外信息(主要是评论数和推荐人数)requests.getStoryExtraInfo( id, ( data ) => {
_this.setData( { extraInfo: data });});

在跳转到评论页面的时候顺便传递评论数量,这样我们就不用在评论页面在请求一次额外信息了。

//跳转到评论页面toCommentPage: function( e ) {
var storyId = e.currentTarget.dataset.id;
var longCommentCount = this.data.extraInfo ? this.data.extraInfo.long_comments : 0; //长评数目
var shortCommentCount = this.data.extraInfo ? this.data.extraInfo.short_comments : 0; //短评数目
//跳转到评论页面,并传递评论数目信息
wx.navigateTo( {
url: '../comment/comment?lcount=' + longCommentCount + '&scount=' + shortCommentCount + '&id=' + storyId});}

评论页面接受参数

//获取传递过来的日报id 和 评论数目onLoad: function( options ) {
var storyId = options[ 'id' ];
var longCommentCount = parseInt( options[ 'lcount' ] );
var shortCommentCount = parseInt( options[ 'scount' ] );
this.setData( { storyId: storyId, longCommentCount: longCommentCount, shortCommentCount: shortCommentCount });},

进入页面立刻加载数据

//加载长评列表onReady: function() {
var storyId = this.data.storyId;
var _this = this;
this.setData( { loading: true, toastHidden: true });

//如果长评数量大于0,则加载长评,否则加载短评
if( this.data.longCommentCount > 0 ) {
requests.getStoryLongComments( storyId, ( data ) => {
console.log( data );
_this.setData( { longCommentData: data.comments });
}, () => {
_this.setData( { toastHidden: false, toastMsg: '请求失败' });
}, () => {
_this.setData( { loading: false });
});
} else {
loadShortComments.call( this );
}}/** * 加载短评列表 */function loadShortComments() {
var storyId = this.data.storyId;
var _this = this;
this.setData( { loading: true, toastHidden: true });
requests.getStoryShortComments( storyId, ( data ) => {
_this.setData( { shortCommentData: data.comments });
}, () => {
_this.setData( { toastHidden: false, toastMsg: '请求失败' });
}, () => {
_this.setData( { loading: false });
});}

评论页面的展示也是非常的简单,一下给出长评模版,短评也是一样的,里面的点赞按钮功能木有实现哦。

{{longCommentCount}}条长评{{item.author}}{{item.content}}{{item.time}}

主题日报

主题日报的样式跟首页几乎一模一样,我是拷贝过来修改了一点点(懒)。却别在多了一行主编区域。不过这个主编区域没有实现什么功能,本来是点击主编的头像跳转到主编的个人首页简介,没有时间安排就不做了,这也是需要解析html的(累)。

主题日报列表需要接受一个具体的主题日报id,根据这个id来请求接口获取主题日报的日报列表。

//接受主页传递过来的主题日报idonLoad: function( options ) {
this.setData( { id: options.themeId });}

主题日报的请求列表方式和主页的列表方式差不多,由于没有发现分页参数,主题日报的日报列表这部分也没有分页请求。主题日报的日报详情还是跳转到日报详情页面的。

设置页面

本来想做设置页面里列出的功能,但是工作比较忙,还是归入到后边的完善计划吧,现阶段只做了简单的页面布局。

但是还是讲一下自己的思路

  • 夜间模式就是改变应用的显示样式,利用到了css,我们可以在page中放置一个顶层的view来包括起所有的wxml元素,当切换主题时给页面顶层元素一个主题控制类。

  • 那怎么实现换肤立即生效呢?一个页面刚启动是会经过onLoad、onShow等,当第二次进来的时候页面的onLoad事件就不会在次触发,而是触发onShow事件,我们可以通过onShow事件来获取存在全局缓存中的主题设置。

    onShow: function() {
    var app = getApp();
    this.setData({theme: app.globalData.theme});}
    ...
    • 清除缓存功能,当然是把临时文件和localStorage中的数据清空。

    clearDataEvent: function() {
    wx.clearStorage(); //清除应用数据}
    • 应用的无图浏览模式跟主题的思路差不多,就是判断应用缓存中的设置是否是无图模式,如果是就在内容显示的时候加一个判断,根据这个值来判断是否显示图片类型的内容。

    onLoad: function() {
    var app = getApp();
    this.setData({imageMode: app.getImageMode()});}

    总结

    问题

      • 蛮多图片显示不出来,不知到是为什么,src路径正常,以前的小豆瓣图书也是有图片列表,但是没有出现这种情况。

      • 代码结构比较烂,很多地方都没有优化处理,复用率较低,待重构。

      • 页面布局有些不合理,尺寸控制的不够好。

      • 部分wxml没有用模版功能代替重复的渲染工作,达不到复用效果。

      闲语

      本次编写的小程序用到了蛮多知识点,虽然花费了不少时间,但是一切都是非常的值得。编写的过程中遇到最大的困难就是解析html内容,可以说是绞尽脑汁,哈哈,智商不足啦。很期待能有网友能奉献出更好的解决方法。这个小例子做的比较简陋,很多功能没有完全实现,跟别人的Android和React仿客户端相比,小巫见大巫啦。还得抽空完成后续的更多功能。

      到目前为止,小程序已经更新了几次,支持了ES5/ES6转换、下拉刷新事件、上传文件等功能,不过还有很多API还不能在模拟环境下显示效果。自己觉得一直做类似于豆瓣图书和知乎日报等除了网络请求之外没什么特别的地方的应用也不好,需要尝试新的API来扩展自己的视野,后续打算往未使用到的API进行案例制作。不知不觉已经踏出校园准备有4个月了,很怀念以前的学习日子,做过很多案例,但是都没有写日志和保存的习惯。这次写的字数蛮多的,可累死我了。很幸运自己初入工作圈就能碰上小程序风暴,期待它正式公测!

      现阶段比较完整的效果动态图

      本次示例的源码地址:

      https://github.com/oopsguy/WechatSmallApps

      http://git.oschina.net/oopsguy/WechatSmallApps

      部分图片显示不了的问题已得到修复,感谢热心网友pull request

      如果大家喜欢,给个star激励一下我,以后会有更好的作品与大家分享:)

      来源:oopsguy

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 &lt;script type=&quot;text/javascript&quot; src=&quot;https://res.wx.qq.com/open/js/jweixin-1.
    wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.n
    微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index=&quot;{{index}}&quot
    H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器: let&#160;ua&#160;=&#160;navigator.userAgent.toLowerCase(); let&#160;isWeixin&#160;=&#160;ua.indexOf(&#39;micromessenge
    微信小程序获取data-xx=&quot;&quot;属性的值,自定义属性设置和获取(data-) 微信小程序&lt;view class=&quot;details-btn&quot; data-taskId=&quot;111&quot; bindtap=&#39;taskdetails&#39
    小程序报错:TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0(或者当前的) -&gt; 2.14.1 解决问题
    H5跳转微信小程序-成功案例(VUE)(踩坑无数) TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点: 1、已认证的服务号 2、绑定JS接口安全域名 (在微信公众平台设置) 3、IP白名单 (在微信公众平台设置) 4、将小程序和H5公众号进
    微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也
    情景1.拉取公司代码演示: 因为github有墙,这里我们以gitee(码云)为例作为演示 (其实就是国产github,也非常好用~) 步骤一:打开Git界面 先在一个空文件夹右击Git Bash Here,打开git界面 步骤二:输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
    如何开发微信小程序? 作为一名10多年一直从事互联网平台开发的从业者,我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤, 老张带您捋一捋整个环节,小白用户可以收藏了。 好了废话不多说,开始! 一、开发前小程序需要准备的资料 我们在开发微信小程序前,需要准备下相关资料。这个资料主要是后
    原生小程序开发优化方案 为了更好的制定优化方案,我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同,依然是浏览器内核,而不是原生客户端。 而对于传统的网页来说,UI 渲染和 JS 脚本是在同一个线程中
    1,不要下两倍尺寸的图片, 小程序本身自己就会对元素缩小两倍,设计图片的一杯就已经很清晰了。 2,图片压缩,(主要是压缩静态资源,ps 可以压缩,然后有一些在线压缩工具,保持600-800kb 的静态) 3,通用的代码组件化 4,是在工程量太大可以分包,分包现在最大支持20m(一般都不会去分包的)
    文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT,上线两个月就已经超过一亿用户,成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈,引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛,虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现?它到底会不会取代搜索引擎?90%的人真的会因为ChatG
    文章浏览阅读193次。8. 导航和路由管理:掌握小程序的导航方式,如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等,学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构:了解小程序的定义、特点以及与传统APP的区别,掌握小程序的运行环境、组件和API等基本概念。10. 支付功能:学习小程序的支付方式,如微信支付、支付宝支付等,了解支付流程和注意事项,学会实现小程序的支付功能。9. 用户授权和登录:了解小程序的用户授权机制,如获取用户信息、调用微信API等,学会实现用户的登录和注册功能。_微信小程序开发知识点总结
    文章浏览阅读4.8k次,点赞7次,收藏18次。一、准备工作1. 安装微信开发者工具,并登录微信小程序账号;2. 准备斗地主游戏的图片资源;3. 准备斗地主游戏的音效资源;二、创建小程序1. 打开微信开发者工具,点击“新建小程序”,输入小程序名称,选择小程序的项目目录,点击“创建”;2. 在小程序的项目目录中,新建文件夹“images”,将准备好的斗地主游戏的图片资源放入“images”文件夹中;3. 在小程序的项目目录中,新建文件夹“sounds”,将准备好的斗地主游戏的音效资源放入“sounds”文件夹中;三、编写代码1. 在小程_扑克牌微信小程序代码
    文章浏览阅读3.9k次,点赞3次,收藏7次。一、准备工作:1. 安装微信开发者工具,创建小程序项目;2. 准备游戏角色图片;3. 准备游戏背景音乐;二、实现步骤:1. 创建游戏页面,添加游戏角色图片,添加游戏背景音乐;2. 创建游戏角色类,定义游戏角色属性,如角色名称、角色图片、角色能力等;3. 创建游戏类,定义游戏属性,如游戏人数、游戏角色、游戏规则等;4. 创建游戏控制类,定义游戏流程,如游戏开始、游戏结束、游戏角色分配等;5. 创建游戏界面,实现游戏流程,如游戏开始、游戏结束、游戏角色分配等;6. 创建游戏结果页面,显示游戏_微信小程序游戏代码
    文章浏览阅读1.7k次。1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于模拟聊天。 2. 定义数据结构:定义一个数据结构,用于存储聊天记录,包括发送者、接收者、消息内容等信息。 3. 实现聊天功能:实现聊天功能,包括发送消息、接收消息、显示消息等功能。 4. 实现界面:使用微信小程序的界面框架,实现聊天界面,包括聊天记录列表、输入框等。代码示例:// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
    文章浏览阅读2.1k次。1、创建小程序项目:使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击“创建”按钮,即可创建小程序项目。2、添加页面:在小程序项目中,可以添加多个页面,每个页面都有自己的页面文件,比如首页、分类页、购物车页、我的页面等。3、添加组件:在小程序项目中,可以添加多个组件,比如商品列表组件、购物车组件、订单组件等,用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口:在小程序项目中,可以添加多个接口,用于获取商品信息、购物车信息、订单信息等,以便在页面中显示。5、_微信开发者工具做一个我的商城
    文章浏览阅读515次。首先在配置页面index.json 添加以下代码。然后在index.jx页面配置下拉刷新。_小程序云开发上拉刷新