前言:
这篇博客是小弟第二次写博客,主要是针对于微信小程序的一篇文章。
在这篇文章中,我将写一下自己的见解与初次完成的一个纯粹用微信小程序开发1的demo。欢迎各位的批评、建议和意见。同时本人在这里会分享本人的代码。
如有需要联系本人的,私人QQ:2931592005。私人邮箱:2931592005@qq.com,私人微信:a2931592005。
小程序的结构。
在这里,我会写一些基础的介绍。首先是小程序的一个文件结构。
当新建一个小程序的时候,会默认给你一个demo。
主要的部分为根目录下的app.js、app.json、app.wss,这些文件是小程序的全局配置,是小程序的主体。
其中,app.json是必须有的一个全局配置文件,用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.js是也是一个必须的文件,你可以在里面不写任何东西,但是这个文件必须有。这个文件中的部分语法与JavaScript相似
app.wxss不是一个必须的文件,它是处理全局的一个WXSS样式的文件。其语法与CSS相似。
在上面的截图中可以看到有index和logs文件夹。这两个文件夹是小程序的各个页面。接下来的例子以index为例
在index中可以看到有index.wxml、index.wxss、index.js和index.json
其中index.wxss、index.json语法与根目录下的全局配置文件的效果基本相同,不同的地方在于,他们仅影响本页面,并且在编写后会覆盖掉全局配置相同的部分。index.js和index.wxml是必须的文件。index.js相当于是一个动作脚本,用于对index.wxml进行动态修改,index.wxml是页面,用于对用户呈现内容,其语法与H5相似。
通俗一点来说,index.wxml相当于一个素体手办,index.wxss相当于给手办上色,index.js相当于动态对手办的姿势、动作进行动态改变,index.json相当于修改手办的展台。
微信小程序知识点(部分)
微信小程序渲染。
上面提到一个微信小程序的全局配置的必要文件有app.json和app.js。因此微信小程序在新建后只需要保留对应的文件即可。(如下图)
其中app.json和app.js内部分别如下图
app.json(其中必要的属性是pages,windows和style不是必要的。其具体的属性值和属性描述参考微信小程序官方文档)
app.js(在app.js里,键入App,会像其他IDE一样出现提示,选定后这些内容会直接自动显示)
现在在控制台可以看到,有报错。
这里的报错是因为一个微信小程序必须要有至少一个页面。而页面就是在app.json的pages属性中配置的。每次页面文件的路径发生改变时,app.json下的pages也必须进行修改。
可以看到,pages/index/index下生成了四个文件。
其中,我们在文件index.wxml中写一个例子。
接下来一个重点,是微信小程序的一种数据渲染方式,分别有“数据绑定”、“列表渲染”、“条件渲染”。在下面我会一一举例。
- “数据绑定”
在进行编写的时候,我们首先打开对应页面的.js文件。在data里编写一个对应的数据。
然后在对应的.wxml中,将这个数据引用。
-
“列表渲染”,同理先在对应的文件的data属性中写。(这里需要注意,不用的两部分,需要用","隔开,每一条结尾不要有逗号‘ps这大概是微信小程序最恶心的地方了。’)
.js文件里,我们加了一个demo2
在.wxml中
ps:微信小程序的列表渲染,可以写二维、三维数组。 -
条件渲染。.js
.wxml
demo
在这部分我会写一个demo。其功能是实现简单的答题。
首先编写页面。使用微信小程序本身的一些组件进行编写。
<!--pages/index/index.wxml-->
<view>
<form bindsubmit="submit">
<view>
<input type="hidden" name="index" value="每题1分。当前题号:{{index}}/3" disabled="true"></input>
</view>
<view wx:for="{{timu}}">
{{item}}
</view>
<view class="br"></view>
<view>
<radio-group bindchange="radioChange" name="radio">
<radio class="radio" wx:for-items="{{daan}}" checked="{{checked}}" value="{{item}}">
<view>{{item}}</view>
</radio>
</radio-group>
</view>
<view class="br"></view>
<view style="margin-left:15%;">
<button bindtap="a" data-index="{{index}}" style="float:left;width:40%;margin-left:5px;">上一题</button>
<button form-type="submit" style="float:left;width:40%;margin-left:5px;">下一题</button>
</view>
</form>
</view>
这里需要讲解一下,微信小程序支持自定义方法。在对应的组件上添加属性bindtap;如果需要传值,则定义“data-”,后面的index就是传值的名称。在对应的js文件中,写这个方法并添加一个参数。
.js
提示,在IDE中,可以写console.log,通过“调试器”看到对应的值
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
index: '1',
timu: ['1/当驾驶时前方出现行人该如何做?'],
daan: ['减速', '加速', '不停按喇叭'],
yes: ['不停按喇叭'],
timus: [['1/当驾驶时前方出现行人该如何做?'], ['2/当驾驶时前方出现行人该如何做?'], ['3/当驾驶时前方出现行人该如何做?']],
daans: [
['减速', '加速', '不停按喇叭'],
['加速', '减速', 'aaaa'],
['aaaaa', '不停按喇叭','减速']
],
yeses: [
'减速',
'加速',
'不停按喇叭'
],
dadui: '0',
checked:''
},
a: function(e){
var index = e.currentTarget.dataset['index'];
console.log(index);
if(index <= '1'){
return ;
}
var data = this.data;
index = index - 1 ;
this.setData({
timu: data.timus[index-1],
daan: data.daans[index-1],
yes: data.yeses[index-1],
index: index,
checked: ''
});
},
submit: function (e) {
var index = e.detail.value.index;
var dadui = this.data.dadui;
index = index.substring(10, index.length - 2);
var radio = e.detail.value.radio;
var dadui = this.data.dadui;
if (radio == this.data.yeses[index - 1]) {
this.setData({
dadui: ++dadui
});
}
if (index === '3') {
//销毁当且页面,并展示新页面。显示得分。
wx:wx.redirectTo({
url: '/pages/jieguo/jieguo?dadui=' + dadui,
success: function(res) {}
})
return;
}
var timus = this.data.timus[index];
var daans = this.data.daans[index];
var yeses = this.data.yeses[index];
this.setData({
index: [++index],
timu: timus,
daan: daans,
yes: yeses,
checked: ''
});
}
})
源码地址
CSDN:谢谢各位
PS:如果需要本demo的源码,请直接联系本人。
文章参考资料:微信小程序官方文档
欢迎大家的转载。建议和意见。