對小程序的見解

逆戰

什么是小程序

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

小程序的種類

微信小程序、支付寶小程序、頭條小程序、百度小程序、QQ小程序

小程序的發展史

時間備注

2016-09-21	微信小程序內側
2016-11-03	微信小程序公測
2017-01-09	微信小程序正式上線
2017-09-20	支付寶小程序公測
2017-12-28	微信小程序首頁下拉入口以及微信小程序上線
2018-01	微信小游戲大量推廣-跳一跳
2018-02	祝福類小程序以及小游戲
2018-03	小米、中興、華為、金立、聯想、魅族、努比亞、OPPO、vivo、一加共十家手機廠商、 一起推出了快應用，雖然名字不同，本質上也是小程序
2018-07	百度小程序上線
2018-09-16	頭條小程序上線
2019-06	QQ小程序上線

小程序的優勢

對于開發者而言，小程序開發門檻相對較低，難度不及APP，能夠滿足簡單的基礎應用，適合生活服務類線下商鋪以及非剛需低頻應用的轉換。
對于用戶來說，能夠節約使用時間成本和手機內存空間；對于開發者來說也能節約開發和推廣成本。

配置小程序

全局配置
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置。文件內容為一個 JSON 對象

屬性類型必填描述最低版本

pages	string[]	是	頁面路徑列表
window	Object	否	全局的默認窗口表現
tabBar	Object	否	底部 tab 欄的表現
networkTimeout	Object	否	網絡超時時間
debug	boolean	否	是否開啟 debug 模式，默認關閉
functionalPages	boolean	否	是否啟用插件功能頁，默認關閉	2.1.0
subpackages	Object[]	否	分包結構配置	1.7.3
workers	string	否	Worker 代碼放置的目錄	1.9.90
requiredBackgroundModes	string[]	否	需要在后臺使用的能力，如「音樂播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包預下載規則	2.3.0
resizable	boolean	否	iPad 小程序是否支持屏幕旋轉，默認關閉	2.3.0
navigateToMiniProgramAppIdList	string[]	否	需要跳轉的小程序列表，詳見 wx.navigateToMiniProgram	2.4.0
usingComponents	Object	否	全局自定義組件配置	開發者工具 1.02.1810190
permission	Object	否	小程序接口權限相關設置	微信客戶端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升級后的weui樣式	2.8.0
useExtendedLib	Object	否	指定需要引用的擴展庫	2.2.1
entranceDeclare	Object	否	微信消息用小程序打開	微信客戶端7.0.9

pages

app.json中配置相當于vue中的路由
直接在pages選項中寫頁面路徑，即可創建相應的頁面

{"pages": ["pages/kind/kind","pages/home/home","pages/cart/cart","pages/user/user","pages/details/details","pages/map/map"],"window": {"navigationBarBackgroundColor": "#f66","navigationBarTextStyle": "white","navigationBarTitleText": "樂購","backgroundColor": "#efefef","backgroundTextStyle": "dark","backgroundColorTop": "#0f0","onReachBottomDistance": 50},"tabBar": {"color": "#333","selectedColor": "#f66","backgroundColor": "#efefef","borderStyle": "white","list": [{"pagePath": "pages/home/home","text": "首頁","iconPath": "resources/home.png","selectedIconPath": "resources/home_active.png"},{"pagePath": "pages/kind/kind","text": "分類","iconPath": "resources/kind.png","selectedIconPath": "resources/kind_active.png"},{"pagePath": "pages/cart/cart","text": "購物車","iconPath": "resources/cart.png","selectedIconPath": "resources/cart_active.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "resources/user.png","selectedIconPath": "resources/user_active.png"}]},"networkTimeout": {"request": 6000,"connectSocket": 6000,"uploadFile": 6000,"downloadFile": 6000},"permission": {"scope.userLocation": {"desc": "允許定位你的地理位置"}},"navigateToMiniProgramAppIdList": ["wx5dfe0dd623d5ae6b"],"style": "v2","sitemapLocation": "sitemap.json","debug": false }

在這里的sitemap.json為文件，主要用于配置小程序及其頁面是否允許被微信索引，文件內容為一個 JSON 對象，如果沒有 sitemap.json ，則默認為所有頁面都允許被索引。

頁面配置

pages文件中子文件配置各個頁面
配置局部樣式

{"navigationBarBackgroundColor": "#ff7001","navigationBarTextStyle": "white","navigationBarTitleText": "樂購-首頁","backgroundColorTop": "#efefef","backgroundTextStyle": "light","enablePullDownRefresh": true,"onReachBottomDistance": 50,"disableScroll": false,"usingComponents": {"prolist": "/components/prolist/prolist"//子組件引入路徑} }

這里的js文件主要用于處理頁面的初始數據、生命周期回調、事件處理函數等。

Page({/*** 頁面的初始數據* data 是頁面第一次渲染使用的初始數據。* 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。* 渲染層可以通過 WXML 對數據進行綁定。*/data: {},/*** 生命周期函數--監聽頁面加載* 頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。*/onLoad: function (options) {// options為打開當前頁面路徑中的參數},/*** 生命周期函數--監聽頁面初次渲染完成* 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示* 頁面顯示/切入前臺時觸發*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏* 頁面隱藏/切入后臺時觸發*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載* 頁面卸載時觸發。*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作* 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。* 可以通過wx.startPullDownRefresh觸發下拉刷新，調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。* 當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數* 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。* 在觸發距離內滑動期間，本事件只會被觸發一次*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function (res) {if (res.from === 'button') {// 來自頁面內轉發按鈕console.log(res.target)}// 自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。return {title: '自定義轉發標題',path: '/page/user?id=123',imageUrl: ''}},/*** 監聽用戶滑動頁面事件*/onPageScroll: function () {}/*** 自定義函數*/ })

如果在全局app.js文件中設置一些全局數據，如：獲取設備的基本信息

//app.js App({onLaunch: function () {//獲取設備的基本信息this.getDeviceInfoFn()},getDeviceInfoFn() {wx.getSystemInfo({success: (res) => {console.log(res)// 修改全局變量數據this.globalData.deviceinfo = res}})},globalData: {userInfo: null,deviceinfo:null//設置一個全局設備信息變量接受},

發送異步請求

建議使用es6的模塊化方法，api中提供的是基于commonjs規范的exports以及require語法
定義工具模塊 utils/index.js

// 接口地址 const baseUrl = '接口地址' //暴露全局方法 export function request(options){//解構賦值const {url,data}=options;wx.showLoading({title: '加載中',})// 回調函數、promise、generator + yield、async+awaitreturn new Promise((resolve, reject) => {wx.request({url: baseUrl + url,data: data || {},success: (res) => {// 異步操作成功調用resolveresolve(res)},fail: (err) => {// 異步操作失敗調用rejectreject(err)},complete: () => {// 成功失敗都取消刷新wx.hideLoading()}})}) }

小程序中的常用組件

首頁輪播圖數據的請求以及渲染

<swiperindicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" duration="{{500}}"><block wx:for="{{bannerlist}}" wx:key="index"><swiper-item ><image src="{{'http://.....kuboy.top' + item}}"></image></swiper-item></block> </swiper> <prolist></prolist>//子組件調用

map

<map class="map" longitude="{{longitude}}" latitude="{{latitude}}"scale="15"markers="{{markers}}"controls="{{controls}}"bindcontroltap="controlshandler"//自定義點擊事件></map>//獲取經緯度data: {longitude: '118.8205719000', // 經度latitude: "31.8839713500", // 維度markers: [{id: 1, //marker 點擊事件回調會返回此 idlongitude: '118.8205719000', // 經度latitude: "31.8839713500", // 維度title: '寶塔鎮河妖', // 點擊marker提示信息callout出現時忽略iconPath: '/resources/zuobiao.png', width: 40,height: 40,callout: {content: '寶塔鎮河妖',color: '#f66',fontSize: 14,borderRadius: 5,borderWidth: 3,bgColor: 'white',padding: 10,display: 'BYCLICK', // 'BYCLICK': 點擊顯示; 'ALWAYS': 常顯textAlign: 'center'}}],controls: [{//controls為地圖上顯示控件，控件不隨著地圖移動id: 1,position: { // left,topleft: screenWidth-70, // 獲取設備的寬度以及高度 --- 獲取設備的基本信息top: screenHeight - 150,width: 40,height: 40},iconPath: '/resources/xingzhuang.png',clickable: true // 控制默認不可以點擊}]},//自定義點擊事件controlshandler(event) {console.log(event)//判斷是否點擊的定位按鈕的id號if (event.controlId === 1) {//調用獲取當前經緯度wx.getLocation({success: (res) => {console.log(res)//解構賦值const {longitude,latitude} = resthis.setData({longitude, latitude,markers: [{id: 1, //marker 點擊事件回調會返回此 idlongitude: longitude, // 經度latitude: latitude, // 維度title: '寶塔鎮河妖', // 點擊marker提示信息callout出現時忽略iconPath: '/resources/zuobiao.png', width: 40,height: 40,callout: {content: '寶塔鎮河妖',color: '#f66',fontSize: 14,borderRadius: 5,borderWidth: 3,bgColor: 'white',padding: 10,display: 'BYCLICK', // 'BYCLICK': 點擊顯示; 'ALWAYS': 常顯textAlign: 'center'}}]})}})}},

總結

以上是生活随笔為你收集整理的对小程序的见解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。