微信小程序还在测试阶段,网上有IDE(微信web开发者工具)的破解版,可以在没有AppID情况下进行小程序开发,官方最新版本的IDE(v0.10.101100)也已经支持无AppID配置下开发,相信离正式开放不远了。
其实小程序的项目结构除了app级文件外并没有太多强制要求,引用时通常文件路径正确即可。
app.json用来声明程序配置;app.wxss可以定义全局通用样式;app.js定义全局数据、方法以及app生命周期函数等。这些文件的文件名固定,同时必须在项目根目录下,程序编译时直接写死了这些文件的引用路径。其中,app.json文件为必须,否则编译时会直接报错,其他为非必须,但是如果需要,文件路径必须固定。
通常一个页面对应一个目录,包括.js、.wxml、.wxss、.json文件,文件名称必须与目录名称相同。.wxml文件类似html,声明组件;.wxssw文件类似css文件,声明组件样式,会覆盖app.wxss样式;.json文件为页面配置文件;.js文件定义页面逻辑、数据以及页面(Page)的生命周期等。pages文件必须在app.json中注册后才能使用,注册的第一个page为小程序的首页。
包括图片文件等,位置随便放,引用时路径正确即可。
使用双层大括号 {{}} 可以将Page的js文件中声明的data与.wxml组件进行数据绑定,数据更新时,可以使用Page的setData方法更新data,页面会自动更新view。
<scroll-view scroll-y="true" bindscrolltolower="loadMore">
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<block wx:for-items="{{imageUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</scroll-view>
其中,imageUrls、topics都是Page中声明和初始化的data。另外,WXML提供了wx:for-items方便我们进行列表渲染,另外还有wx:if可以进行条件渲染。
Page( {
data: {
pageNum: 0,
topics: [],
hidden: false,
imageUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
]
},
onLoad: function() {
this.requestTopics(false);
},
requestTopics: function (reset) {
var that = this;
wx.request( {
url: 'https://cnodejs.org/api/v1/topics',
data: {
page: that.data.pageNum + 1,
limit: 10,
mdrender: false
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
that.setTopics(res.data.data, reset);
}
});
},
loadMore: function (e) {
this.setData({hidden: false});
console.log("pageNum=" + this.data.pageNum);
this.requestTopics(false);
}
})
这里需要注意的是,setData是Page实例的函数,如果在其他作用域中,例如在网络请求成功的回调中,使用this.setData()是更新不了数据的,因为此处的this取到的并不是Page。因此,通常需要先将Page实例缓存起来再使用。调用其他方法或者data情况类似。
公共的、可复用的页面模块我们抽出来作为页面模版(template),更加方便高效。使用<template></template>标签定义一个页面模版,如果在其他页面引用,使用import导入模版即可。
<template name="cnode-topic">
<navigator url="/pages/topicdetail/topicdetail?topicId={{topic.id}}">
<view class="topic-item" >
<view class="topic-title-line">
<text class="topic-title">{{topic.title}}</text>
<text class="topic-top" wx:if="{{topic.top}}">置顶</text>
<text class="topic-good" wx:if="{{topic.good}}">精华</text>
</view>
<view class="topic-author">
<image class="author-image" src="{{topic.author.avatar_url}}"></image>
<text class="small-text author-name">{{topic.author.loginname}}</text>
<text class="small-text topic-date">{{topic.create_at}}</text>
<text class="small-text topic-tab">{{topic.tab}}</text>
</view>
<text class="topic-content">{{topic.abstract}}</text>
<text class="total-button">查看全文</text>
</view>
</navigator>
</template>
name属性作为template的标识,template有自己的作用域,在引用template时可以传入需要的data。例如:
<import src='topic_item.wxml' />
<view class="topic-list">
<block wx:for-items="{{topics}}" wx:for-item="topic">
<template is="cnode-topic" data="{{topic:topic}}" />
</block>
</view>
import template的时候,不具有传递性。也就是说假如a.wxml import b.wxml,b.wxml import c.wxml,那么a中是没有引用到c中的template的。
在JavaScript文件中声明的变量和函数只在该文件中有效,不同的文件中可以声明相同名字的变量和函数,不会互相影响。我们可以将一些公共的代码抽离成为一个单独的js文件,作为一个模块。模块只有通过module.exports才能对外暴露接口。
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds();
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
// 外露接口
module.exports = {
formatTime: formatTime
}
在需要使用这些模块的文件中,使用require(path)将公共代码引入,即可调用对应的方法。
var util = require( '../../utils/util.js');
Page( {
setTopics: function(topics, reset) {
console.log(topics);
for(var i = 0; i < topics.length; i++) {
topics[i].abstract = topics[i].content.substring(0, 150);
topics[i].create_at = util.formatTime(new Date(topics[i].create_at));
}
this.setData({
topics: reset ? topics : this.data.topics.concat(topics),
hidden: true,
pageNum: this.data.pageNum + 1
});
}
})
使用cnode社区api做的简单的微信小程序:
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123