微信小程序進階

微信小程序和微信公衆號不能同時用一個賬號。     一個微信公衆號可以關聯多個小程序。

公衆號賬號是 [email protected]

登錄地址  可用賬號和掃碼登錄  https://mp.weixin.qq.com/

 

小程序的賬號是 [email protected]         只能用此賬號登錄小程序進行 發版 查看

登錄地址  只能用賬號登錄  https://mp.weixin.qq.com/

 

小程序官方詳細文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

 

小圖標地址:https://www.iconfont.cn/collections/detail?cid=29

 

1.git版本管理

    a.登錄代碼管理, 新建一個項目。:https://git.weixin.qq.com/users/authorize#wechat_redirect

    b.微信開發者工具,版本管理

    設置選項,

    設置遠程: 添加遠程倉庫。

    設置網絡和認證:網絡代理設置-自動   

                                 認證方式-使用用戶名和密碼(即註冊時候的賬號和密碼)

                                  

   c.開發者工具中,右鍵遠程:添加遠程倉庫即可。

                                                  

2.wxml文件的使用

    wxml文件的標籤使用語法文檔:  https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

    參考文檔:https://www.cnblogs.com/echolun/p/11094605.html

    {{}}   表達式來綁定解析JS文件中定義的變量

 {{}}中除了單純的解析變量,還能做簡單的邏輯運算

    a.算術計算

        <text>{{num1+num2}}</text>

    b.字符串拼接

        <text>{{"聽風是風"+str}}</text>

    c.三元表達式

        <text>{{userName?userName:'登錄'}}</text>

    d.條件邏輯

        <text wx:if="{{bool}}">我叫聽風是風</text>

    e.特殊組件

        <block wx:if="{{bool}}">

            <text>我叫聽風是風,</text>

        </block>

        block : block本身不會被渲染,只起到容器的作用,比如當bool爲true可以看到wxml中並沒有渲染block組件

        <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">

            第{{index}}個元素是: {{item}}

        </view>

 

    <view> {{message}} </view>        相當於div標籤

    <text>深山夕照深秋雨。</text>    相當於span標籤

    <image bindload='imgLoad' src='https://d.jpg'></image>    相當於img標籤   

    bindload圖片加載完成後執行的函數。  lazy-load  懶加載函數

    <button bindtap="alert">bindtap</button>    <button bind:tap="alert">bindtap</button>

    bindtap   bind:tap  相當於點擊事件

             

    

3.js文件的使用

    js文件用來處理業務邏輯綁定數據各種事件。

        

    a.綁定數據

    在js文件中,所有的數據處理都放在page屬性中。

    其中data屬性存放所有靜態數據,在wxml中通過{{name}}即可獲取到。

        

    b.函數事件

    函數與data屬性同級,放在page屬性中。

4..json文件的使用

    靜態數據配置文件。

5.app.json

    {
  "pages":[ //頁面數組
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", //背景文本樣式 可選light dark
    "navigationBarBackgroundColor": "#fff", //導航背景色,可定義任意顏色
    "navigationBarTitleText": "WeChat", //導航標題,可定義任意文本
    "navigationBarTextStyle":"black" //導航文本顏色,可選black white
  }
}

    a.pages

    pages 配置所有頁面路徑(如果刪除某條路徑,同步刪除掉對應的頁面文件,增加頁面也是如此)。

    新增頁面推薦做法是直接在pages數組中新增一條頁面路徑,保存後pages文件夾會自動生成一個新的頁面

    b.windows

    windows配置所有頁面的頂部背景顏色文字顏色標題等,這是全局的配置,所有頁面都會生效。

    我們可以在單個頁面json配置中定義獨特的風格用於覆蓋全局配置,

    c.注意

    json文件都是被包裹在{}中,並以key-value方式展示。注意,key只能加上雙引號,沒加雙引號,或者加了單引號都會報錯。

    json文件中無法使用註釋,添加任意註釋都會引發報錯。

 

2.設置底部導航欄

    在app.json 文件中添加  tabBar  屬性即可。

"tabBar": {

    "color": "#a9b7b7",

    "selectedColor": "#11cd6e",

    "borderStyle": "white",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首頁",

        "iconPath": "images/index.png",

        "selectedIconPath": "images/indexselected.png"

      },

      {

        "pagePath": "pages/user/user",

        "text": "用戶",

        "iconPath": "images/user.png",

        "selectedIconPath": "images/userselected.png"

      }

    ]

  }

3.

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章