小程序【一】

開發前期準備

1. 進入註冊小程序帳號

https://mp.weixin.qq.com/wxopen/waregister?action=step1

2. 可在此處獲取appid

3.在此處下載開發工具

 

小程序配置 app.json文件

pages裏放頁面路徑列表，最上面的打開默認顯示；

window裏配置窗口樣式；

tabBar：底部 tab 欄的表現；

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
}複製代碼

window屬性：

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	String		導航欄標題文字內容
navigationStyle	String	default	導航欄樣式，僅支持如下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕。參見注2。	微信客戶端 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light

快速建頁面級文件夾

補全路徑便可：

{

"pages": [

"pages/news/news",

]}

會生成一個這樣的頁面級文件夾

ps：若是本身建文件，那麼這四個文件名必須一致

【.js】處理邏輯層

【.wxml】處理視圖層

【.wxss】處理樣式層

視圖標籤

視圖容器(View Container)：

組件名	說明
view	視圖容器
scroll-view	可滾動視圖容器
swiper	滑塊視圖容器

基礎內容(Basic Content)：

組件名	說明
icon	圖標
text	文字
rich-text	富文本
progress	進度條

表單(Form)：

標籤名	說明
button	按鈕
checkbox	多項選擇器
form	表單
input	輸入框
label	標籤
picker	列表選擇器
picker-view	內嵌列表選擇器
radio	單項選擇器
slider	滾動選擇器
switch	開關選擇器
textarea	多行輸入框

導航(Navigation)：

組件名	說明
navigator	頁面連接
functional-page-navigator	跳轉到插件功能頁

多媒體(Media)：

組件名	說明
audio	音頻
image	圖片
video	視頻

地圖(Map)：

組件名	說明
map	地圖

輪播圖用法示例：

1.建立一個class爲idol-community的view容器

2.建立swiper標籤

3.一個swiper-item標籤裏面放一個image標籤

4.爲swiper設置屬性便可

5.在當前js文件中設置：

Page({

data: {

indicatordots:true,

autoplay: true

},})

視圖：

 <view class='idol-community'>

      <swiper   indicator-dots='{{indicatordots}}'   autoplay='{{autoplay}}'   >

            <swiper-item>

                 <image src='../../images/1.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/2.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/3.jpg'></image>

            </swiper-item>

            <swiper-item>

                 <image src='../../images/4.jpg'></image>

            </swiper-item>

   </swiper>

</view>

swiper

滑塊視圖容器。

屬性名	類型	默認值	說明	最低版本
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index

動態將其餘文件中的數據遍歷展現在視圖中：

例：頁面同級文件夾的兄弟文件夾data，中的newsdata.js數據文件

newsdata.js中的內容：一條條的數組

在newsdata.js頁面將數組導出：

module.exports = {

newsData: newsData

}

在要接收的js頁面將數據接收：

 onLoad: function (options) {

    this.setData({

         newsData: newsData.newsData

})

}

1.用block標籤將要遍歷的視圖板塊包裹：

2.wx:for="{{newsData}}"   for循環newsData這個數組     wx:for-item="item"    起名爲item

3.可直接這樣使用  <text>{{item.authorname}}</text>

 <block wx:for="{{newsData}}"   wx:for-item="item"    wx:key="key">

      <text>{{item.authorname}}</text>

 </block>

將頁面視圖板塊 提取爲組件：

例 1.在頁面級文件夾archives下建立文件夾archives-template做爲頁面組件文件夾

2.文件夾下建立wxml和wxss視圖和樣式文件

3.在wxml視圖文件下建立template模板標籤，存放原視圖

給模板標籤起一個name

4.原視圖區域則存放：

用is：name名引進模板    動態獲取的data文件則用...item表示

5.模板內的數據展現也不用再用

<text>{{item.authorname}}</text>

而是直接

<text>{{uthorname}}</text>

6.在頁面級wxml頁面開頭引入模板頁面：

第一個archives-template是文件夾名

<import   src='archives-template/archives-template.wxml'/>

7.在頁面級wxss頁面開頭引入模板樣式：

@import "archives-template/archives-template.wxss";

頁面跳轉：

使用 ：bindtap='goarc'

<text class='meet' bindtap='goarc'>碰見</text>

在本頁面js文件裏：goarc函數

Page({

  goarc: function (event) {

        wx.navigateTo({

        url: '../archives/archives',

})

},})