下面先跟着南京小程序开发先看看效果。
开发环境准备
小程序出来后第二天破解了。第三天,微信下载了开发工具。现在只需下载微信开发者工具即可使用。
创建项目时,请选择no appid,因此不会对appid进行验证。
目录结构
1. App.js注册应用程序逻辑,App.wxss全局样式文件App.json配置信息
2.页面存储页面文件
3. Utls工具类代码
4.图像图像资源文件
applet中的每个页面都有三个文件。wxml。wxss。js,对应于结构,样式和逻辑,它对应于网页中HTML CSS和JS之间的关系。
开发第一页
来自新项目的代码
<!--index.wxml-->
<view>
<view bindtap="bindViewTap">
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text>{{userInfo.nickName}}</text>
</view>
<view>
<text>{{motto}}</text>
</view>
</view>
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
//index.js
// Get application examples
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
// Event Handler
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
// Call the method of application instance to get global data
app.getUserInfo(function(userInfo){
// Update data
that.setData({
userInfo:userInfo
})
})
}
})
在新项目中,您将看到索引下的代码,然后我们将分别介绍wxml wxss JS。
wxml
这是页面结构的描述文件,主要用于以下内容
1.使用<view> </ view>以标签形式指定组件。
2.使用wx:for wx:if和其他指令在模板上完成一些逻辑处理
3.绑定绑定事件*
wxss
样式文件,基本上与CSS语法相同,但支持的选择器语法在这里受到限制,您可以使用flexbox来完成布局。
在内部,导入命令也可用于导入外部样式文件。
@import "common.wxss";
.pd {
padding-left: 5px;
}
JS
页面逻辑控制,遵循commonJs规范
// util.js
function formatTime(date) {
// ....
}
function formatDate(date, split) {
// ...
}
module.exports = {
formatTime: formatTime,
formatDate: formatDate
}
var utils = require('../../utils/util.js')
这里的JS不是在浏览器环境中运行,所以windows。*代码会报错,不允许DOM操作,官方似乎不能支持其他JS库运行,完全封闭,以后应该逐步改进。
使用页面上的Page方法注册页面
Page({
data:{
// Text: "This is a page"
},
onLoad:function(options){
// Parameters of page initialization options for page jumps
},
onReady:function(){
// Page Rendering Completed
},
onShow:function(){
// Page display
},
onHide:function(){
// Page Hiding
},
onUnload:function(){
// Page closure
}
})
当我们需要更改绑定数据时,我们必须先调用setData方法来修改它,然后才能触发页面更新,如下所示:
Page({
data: {
Text:'This is a page'
},
onLoad: function() {
this.setData({
text: 'this is page'
})
}
})
条件渲染和列表渲染
以下内容来自微信的官方文件。
小程序使用wx:if=""完全条件渲染,类似于vue的V-IF
<view wx:if="{{condition}}"> True </view>
它也可以使用。wx:elif并wx:else 添加一个else块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
wx:for控件属性绑定到一个数组,该数组可用于使用数组中的数据重复呈现组件。
内置变量索引(下标到数组遍历),item(每个数组遍历项)
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
Page({
items: [{
message: 'foo',
},{
message: 'bar'
}]
})
用法wx:for-item可以指定数组当前元素的变量名
使用wx:for-index您可以指定数组当前下标的变量名称:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
事件绑定
Wxml只是使用了bind[eventName]="handler" 语法绑定事件
<view bindtap="bindViewTap"><text>tap</text></view>
Page({
bindViewTap: function(e) {
console.log(e.taget)
}
})
采用data-*和e.target.dateset 传递参数
<view bindtap="bindViewTap" data-test-msg="la la la la la la la la la la"><text>tap</text></view>
Page({
bindViewTap: function(e) {
// Will automatically change to hump naming
Console. log (e. taget. dataset. testMsg) // / la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la
}
})
目前被踩踏的坑
事件绑定 e.target.dataset
当父组件绑定事件和参数并单击时,子组件会冒泡到父组件,这次是e.target.dataset Empty
<view bindtap= "bindViewTap" data-test-msg= "Lala la la la la la la la la la la la la la">
<view><text>tap</text></view>
</view>
Page({
bindViewTap: function(e) {
console.log(e.taget.dataset.testMsg) // undefined
}
})
在线图片加载不稳定
我们还有很多需要从互联网上下载的图片。此处的图像组件显示非常不稳定,并且无法显示许多图像。
摘要
微信小程序还处于内部测试阶段,还有很多问题需要改进,但对于开发速度和体验还是不错的,期待当天正式发布。以上是
南京小程序开发今天带来的全部内容。我希望您学习如何使用微信小程序对您有所帮助。
本文地址:
http://www.njanyou.cn/web/2527.html
Tag:
专业服务:
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话:025-65016872
上一篇:
了解跳出率:如何衡量,审核和改进
下一篇:
您公司需要一个移动响应网站