對小程序的見解

逆戰(zhàn)

什么是小程序

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

小程序的種類

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

小程序的發(fā)展史

時間備注

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

小程序的優(yōu)勢

對于開發(fā)者而言，小程序開發(fā)門檻相對較低，難度不及APP，能夠滿足簡單的基礎(chǔ)應(yīng)用，適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換。
對于用戶來說，能夠節(jié)約使用時間成本和手機(jī)內(nèi)存空間；對于開發(fā)者來說也能節(jié)約開發(fā)和推廣成本。

配置小程序

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

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

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

pages

app.json中配置相當(dāng)于vue中的路由
直接在pages選項中寫頁面路徑，即可創(chuàng)建相應(yīng)的頁面

{"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為文件，主要用于配置小程序及其頁面是否允許被微信索引，文件內(nèi)容為一個 JSON 對象，如果沒有 sitemap.json ，則默認(rèn)為所有頁面都允許被索引。

頁面配置

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

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

這里的js文件主要用于處理頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。

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

如果在全局app.js文件中設(shè)置一些全局?jǐn)?shù)據(jù)，如：獲取設(shè)備的基本信息

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

發(fā)送異步請求

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

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

小程序中的常用組件

首頁輪播圖數(shù)據(jù)的請求以及渲染

<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>//子組件調(diào)用

map

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。