无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁(yè) 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁(yè) > 小程序資訊 > 小程序常見問(wèn)題
IOS開發(fā)者試水：微信小程序開發(fā)教程-從零開始（1）
時(shí)間：2016-10-19 12:12:00

前言

微信小程序暫時(shí)處于內(nèi)測(cè)期間，公司大的版本剛好上線了，閑來(lái)無(wú)事，看看微信小程序的文檔，順便學(xué)習(xí)學(xué)習(xí)，在此希望和大家一起共勉，發(fā)現(xiàn)自己越來(lái)越懶惰了，越活越?jīng)]上進(jìn)心了，有點(diǎn)危險(xiǎn)，給自己敲下警鐘吧。廢話不多說(shuō)，開始記錄下這些天學(xué)習(xí)到的一些知識(shí)，希望對(duì)正在閱讀的你有所幫助！ 本文為iOS開發(fā)者Bison自學(xué)微信小程序所寫，所以很多東西都和iOS進(jìn)行了一下對(duì)比。

開搞

創(chuàng)建項(xiàng)目在此濾過(guò)，相信大家看著官方文檔就可以搞定

首先我們先把整個(gè)app的架構(gòu)搭起來(lái)

一般市面上的app都已tabbar展示的方式為主，今天我就仿原生的IT Blog下面讓我們看下IT blog長(zhǎng)什么樣吧！

1

首先是TABBAR

下面我將簡(jiǎn)單的介紹一下微信小程序一些不可缺的目錄結(jié)構(gòu)。 1

  • 下面借用官方的解釋
WXSS(WEIXIN STYLE SHEETS)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。

WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示。為了適應(yīng)廣大的前端開發(fā)者，我們的 WXSS 具有 CSS 大部分特性。 同時(shí)為了更適合開發(fā)微信小程序，我們對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。

APP.JSON 文件來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 TAB 等。

文件來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。相當(dāng)于iOS開發(fā)中的AppDelegate

APP.JS 是小程序邏輯部分

根據(jù)上面的目錄結(jié)構(gòu)的解釋不難看出，我們的tabbar是寫在哪的，沒(méi)錯(cuò)就是app.json，下面讓我們看下代碼

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "backgroundColor":"#000000",
    "list": [{
      "iconPath":"image/icon_API.png",
      "selectedIconPath":"image/icon_API_HL.png",
      "pagePath": "pages/index/index",
      "text": "首頁(yè)"
    }, {
      "iconPath":"image/icon_component.png",
      "selectedIconPath":"image/icon_component_HL.png",
      "pagePath": "pages/about/about",
      "text": "我的"
    }]
  }
}

1

上圖框出來(lái)的地方就是我們的tabbar，tabbar里面可以傳一個(gè)數(shù)組list，想顯示多少個(gè)tab就到這里加就行，當(dāng)然個(gè)數(shù)是有限制的最多5個(gè)，一個(gè)的話就沒(méi)必要了。這點(diǎn)和iOS開發(fā)里面頗為相似。 下面我們按下com + s 再 編譯一下，就可以看到如下結(jié)果了

1

iconPath為默認(rèn)圖片路徑，selectedIconPath為點(diǎn)擊時(shí)的圖片路徑，text的話我想不說(shuō)大家也已經(jīng)猜到了，對(duì)，沒(méi)錯(cuò)就是圖片下面顯示的title了。

我們這暫時(shí)只寫了倆個(gè)Tab，在此主要也就是實(shí)現(xiàn)我們的首頁(yè)效果。 由我們的效果圖可以看出，iOS開發(fā)中我們的布局主要用的是tabview，而在微信小程序中類似tabviewCell的布局又是怎么寫的呢？下面我們先寫貼下代碼再做下解說(shuō)。

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

在這段代碼中<template name="items">…</template>是微信小程序中的模板，那什么是模板呢？官方文檔是這樣解釋的。

模板

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。

我的理解這個(gè)相當(dāng)于iOS開發(fā)中的cell，cell有了的話， 那就只缺少一個(gè)數(shù)據(jù)源了，下面我們暫時(shí)做一個(gè)本地的數(shù)據(jù)源。

數(shù)據(jù)主要是寫在js代碼當(dāng)中的，下面來(lái)看下代碼

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    newList:[{url:"baidu.com",title:"sdsadsadasdas",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdassss",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"12",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"333",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"32",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"123",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"456",time:"2016-10-17",imgURL:"../../image/wechatHL.png"},
             {url:"baidu.com",title:"sdsadsadasdas",classification:"454",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}
    ]
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }

})

其中的newList為我們的數(shù)據(jù)源,數(shù)組里面包含多個(gè)字典，字典里面有我們所需要的5個(gè)字段。 cell 和數(shù)據(jù)源都有了，那就只差一個(gè)顯示了， 顯示在微信小程序當(dāng)中用的是列表渲染

列表渲染

在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item

下面我們來(lái)看看這個(gè)列表渲染是怎么做的,首先切換到index.wxml中，代碼如下。

<!--循環(huán)渲染列表 begin-->
<block wx:for="">
  <template is="itmes" data="" />
</block>
<!--循環(huán)渲染列表 end-->

com + s 再 編譯一下可以看到如下的效果

1

到此微信小程序的列表功能已經(jīng)做完了，當(dāng)然我們看到的布局都是很亂的，下一篇我們將優(yōu)化UI讓他和我們的效果圖一樣。

IOS開發(fā)者試水：微信小程序開發(fā)教程-從零開始（2）
微信小程序簡(jiǎn)易全攻略《一》開始構(gòu)建與創(chuàng)建頁(yè)面
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358