小程序初次接触(1)

刚开始接触vue.js没多久就收到小程序内侧的信息,看了看文档两者关联性很强,于是就两者一块学了

首先安装小程序的开发工具,虽然我们没有邀请id但是我们可以通过熟悉操作来达到快速上手,更多的功能体验可以等到正式发布的时候去进行拓展

安装微信开发工具下载网址

目录结构

1
2
3
4
5


app-
---image
---utils
---pages
---app.json

首先必备的就是app.json文件,这是小程序的配置文件,里面配置了路由,底部菜单,窗口标题等等一些最重要的东西

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小练习",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "backgroundColor":"#000000",
    "list": [{
      "iconPath":"image/wechat.png",
      "selectedIconPath":"image/wechatHL.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "iconPath":"image/record.png",
      "selectedIconPath":"image/play.png",
      "pagePath": "pages/about/about",
      "text": "我的"
    }]
  },
  "debug" : true
}

这个文件的内容可读性也是很不错,各个项目是做什么的让人一目了然, pages块的就是注册前端路由了,比如pages/index/index就是需要引用 pages/index 目录下的 index.wxml index.js index.wxss 我们不需要指定后缀,这都是自动完成的

其他的关于引入文件路径的问题都和这个是一类的

接下来就是关于页面的布局在 pages/index目录下创建 index.wxml文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<!--文章列表模板 begin-->
<template name="itmes">
    <view class="imgs"><image src="{{imgURL}}" class="in-img" background-size="cover" model="scaleToFill"></image></view>
    <view class="infos">
        <view class="title">{{title}}</view>
        <view class="date">{{time}}</view>
        <view class="classification">{{classification}}</view>
    </view>
    <view>hello world</view>
</template>
<!--文章列表模板 begin-->


<block wx:for="{{newList}}">
    <template is="itmes" data="{{...item}}" />
</block>

在这里, <template>这标签块内的东西只是一个模板,而不会实际显示出来,真正显示的是下面 <block>这个标签对里的东西,他在这里调用了上面的 template 模板, 当然此时是没有东西的,因为我们指定的变量还没有建立

赶紧在同级目录下创建 index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


//获取应用实例
var app = getApp()
Page({
    data: {
        newList:[{url:"baidu.com",title:"111",classification:"ss",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"222",classification:"ss",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"333",classification:"12",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"444",classification:"333",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"555",classification:"44",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"666",classification:"44",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"777",classification:"32",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"888",classification:"123",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"999",classification:"456",time:"2016-10-17",imgURL:"../../image/test.png"},
            {url:"baidu.com",title:"000",classification:"454",time:"2016-10-17",imgURL:"../../image/test.png"}
        ]
    },
})

这个时候重新解析一下调试界面就能看到效果了,这个时候我们还没用到 .wxss 的文件,所以样式还是裸奔状态

文章目录