欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京小程序开发分享KIJI日报微信小程序版的开发实例
来源:南京网站制作 时间:2019-06-04 08:54:51

下面先跟着南京小程序开发先看看效果。

开发环境准备
 
小程序出来后第二天破解了。第三天,微信下载了开发工具。现在只需下载微信开发者工具即可使用。

创建项目时,请选择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
上一篇: 了解跳出率:如何衡量,审核和改进
下一篇: 您公司需要一个移动响应网站
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
确保网站可访问性的 7 个重要步骤
电子学习中的微交互:通过小设计细节提高用户参与度
iGaming的设计趋势:平衡美学和功能
如何在 2024 年重新设计您的电子商务业务网站?
如何在 2024 年为您的网站创建徽标
无缝过渡:在设计驱动型开发中表现出色
社交媒体受欢迎程度背后的心理学
超越点击和点赞:释放数字营销的力量
最后更新
超越点击和点赞:释放数字营销的力量 社交媒体受欢迎程度背后的心理学 无缝过渡:在设计驱动型开发中表现出色 如何在 2024 年为您的网站创建徽标 如何在 2024 年重新设计您的电子商务业务网站? iGaming的设计趋势:平衡美学和功能 电子学习中的微交互:通过小设计细节提高用户参与度 确保网站可访问性的 7 个重要步骤
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例