微信小程序进阶
微信小程序和微信公眾號不能同時用一個賬號。? ? ?一個微信公眾號可以關聯多個小程序。
公眾號賬號是 992114043@qq.com
登錄地址? 可用賬號和掃碼登錄??https://mp.weixin.qq.com/
?
小程序的賬號是 893103453@qq.com? ? ? ? ?只能用此賬號登錄小程序進行 發版 查看
登錄地址? 只能用賬號登錄??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屬性中。
? ? c.賦值
? ? 通過接口請求回數據賦值給頁面，注意在函數中，要用 var that = this;接一下系統中的this對象。
? ? d.小程序的生命周期
? ??App()函數用來注冊一個小程序。接受一個object參數，其指定小程序的生命周期函數等。
?
onLoad: 頁面加載? ? ? ? 一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。
onShow: 頁面顯示? ? ? ? 每次打開頁面都會調用一次。? 在此處調用獲取頁面的數據接口。
onReady: 頁面初次渲染完成? ? ? ? 一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。詳見生命周期
onHide: 頁面隱藏? ? ? ? ? ? ? 當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載? ? ? ? ? 當redirectTo或navigateBack的時候調用。
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文件中無法使用注釋，添加任意注釋都會引發報錯。
?
6.設置底部導航欄
? ? 在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"
??????}
????]
??}
7.接口請求
? ? 本地測試請求，可以取消合法域名和https驗證
? ??
? ? a.
?
總結
- 上一篇： 基于Springboot + Vue2.
- 下一篇： 假如大数据组件中的动物都变成神奇宝贝，那