2. 程式人生 > >小程式開發備忘

小程式開發備忘

阿新 • • 發佈：2018-11-30

相關資料

小程式簡易教程 https://developers.weixin.qq.com/miniprogram/dev/ 框架介紹 https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 元件介紹 https://developers.weixin.qq.com/miniprogram/dev/component/ Api https://developers.weixin.qq.com/miniprogram/dev/api/

PART1 構成

小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。
 一個小程式主體部分由三個檔案組成，必須放在專案的根目錄，如下：
檔案 必需 作用
app.js 是 小程式邏輯(配置第一次開啟時, 崩潰,後臺切換時需要做的邏輯處理)
app.json 是 小程式公共配置 (小程式有哪些頁面page, 視窗的背景/顏色, 超時設定等)
app.wxss 否 小程式公共樣式表
具體每個頁面page是由由四個檔案組成，分別是：
檔案型別 必需 作用
js 是 頁面邏輯
wxml 是 頁面結構
json 否 頁面配置
wxss 否 頁面樣式表

比如整個小程式所有的page的路徑資訊需要配置到app.json中,舉例如下: 
{
  "pages": [ 
    "pages/login/login",
    "pages/index/index",
    "pages/order/order",
    "pages/solution/solution",
    "pages/personal/personal",
    "pages/navigation/navigation",
    "pages/solutionChart/solutionChart"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}
17 17   1 
{
2 
  "pages": [
3 
    "pages/login/login",
4 
    "pages/index/index",
5 
    "pages/order/order",
6 
    "pages/solution/solution",
7 
    "pages/personal/personal",
8 
    "pages/navigation/navigation",
9 
    "pages/solutionChart/solutionChart"
10 
  ],
11 
  "window": {
12 
    "backgroundTextStyle": "light",
13 
    "navigationBarBackgroundColor": "#fff",
14 
    "navigationBarTitleText": "WeChat",
15 
    "navigationBarTextStyle": "black"
16 
  }
17 
}
"pages" #用於描述當前小程式所有頁面路徑，這是為了讓微信客戶端知道當前你的小程式頁面定義在哪個目錄。

用於指定小程式由哪些頁面組成，每一項都對應一個頁面的 路徑+檔名 資訊。檔名不需要寫檔案字尾，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個檔案進行處理。

陣列的第一項代表小程式的初始頁面（首頁）。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。

如開發目錄為：

├── app.js #整個小程式的通用配置(配置第一次開啟時, 崩潰,後臺切換時需要做的邏輯處理)
├── app.json #小程式公共配置 (小程式有哪些頁面page, 視窗的背景/顏色, 超時設定等)
├── app.wxss #小程式整體通用公共樣式表
├── pages #小程式具體的各個子頁面目錄
│   │── index  #一個小程式page對應以下4個檔案組成
│   │   ├── index.wxml  #相當於web的html頁面
│   │   ├── index.js #控制頁面的邏輯
│   │   ├── index.json #配置本頁面的標題,背景等
│   │   └── index.wxss #頁面的個性化樣式
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils #使用者自定義用於存放工具類

└── images #使用者自定義存放圖片路徑


則需要在 app.json 中寫

{
  "pages":[
    "pages/index/index",//這裡對應的就是pages/index/index.wxml頁面
    "pages/logs/logs"
  ]
}
"window" #定義小程式所有頁面的頂部背景顏色，文字顏色定義等 app.json具體配置項見https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

PART2 邏輯層和檢視層

以資料繫結的程式為例 https://developers.weixin.qq.com/s/HofnzKmb6fZe index目錄就是一個具體的頁面, 下面有js,wxml,wxss等檔案用來描述index.wxml這個頁面 app.json中的pages配置了index這個頁面 
{
  "pages":[
    "index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
12 12   1 
{
2 
  "pages":[
3 
    "index/index"
4 
  ],
5 
  "window":{
6 
    "backgroundTextStyle":"light",
7 
    "navigationBarBackgroundColor": "#fff",
8 
    "navigationBarTitleText": "WeChat",
9 
    "navigationBarTextStyle":"black"
10 
  }
11 
}
12
開啟 index.wxml頁面 <!--index.wxml--> < view > {{text}} </ view > < button bindtap = "changeText"> Change normal data </ button > < view > {{num}} </ view > < button bindtap = "changeNum"> Change normal num </ button > < view > {{array[0].text}} </ view > < button bindtap = "changeItemInArray"> Change Array data </ button > < view > {{object.text}} </ view > < button bindtap = "changeItemInObject"> Change Object data </ button > < view > {{newField.text}} </ view > < button bindtap = "addNewField"> Add new data </ button >
其中<view> 和<button>等分別是小程式提供的檢視元件和表單元件, 可以理解為html中的標籤 可直接使用並配置相關引數(事件,大小等屬性), 並由小程式渲染.
index.js 程式碼如下 
// pages/index/index.js
Page({

/**
* 頁面的初始資料
*/
data: {
array: ['當天', '本月', '近三月','近半年','本年'],
index: 0,
date: '2016-09-01',
time: '12:01',
barItem: [
{
name: '利潤彙總',
image: '../../images/menu1_unfocus.png',
selectedImage: '../../images/menu1_focus.png',
selected: false,
color: '#666666',
url: '/pages/solution/solution'
},
{
name: '每日營業情況',
image: '../../images/menu3_unfocus.png',
selectedImage: '../../images/menu3_focus.png',
selected: true,
color:'#FF0000',
url: '/pages/index/index'
},
{
name: '運營支出',
image: '../../images/menu2_unfocus.png',
selectedImage: '../../images/menu2_focus.png',
selected: false,
color: '#666666',
url: '/pages/order/order'
},
// {
// name: '',
// image: '../../images/menu4_unfocus.png',
// selectedImage: '../../images/menu4_focus.png',
// selected: false,
// url: '/pages/personal/personal'
// },
],
successresponseData: [],
datalist:[]
},

//更新日期選型,重新整理取值
bindPickerChange: function (e) {

var that = this;
console.log('picker傳送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
wx.request({
url: require('../../config').getnumUrl,
//url: 'http://localhost:8081/framework-protal/main/gas/getsale',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},

data: {
gasid: wx.getStorageSync('gasid'),
type: e.detail.value
},
success: function (res) {
console.log('success')
console.log(res.data)
that.setData({
numresponseData: res.data.response,
})
},
fail: function (res) {
console.log('fail')
}

})
wx.request({
url: require('../../config').getsaleUrl,
//url: 'http://localhost:8081/framework-protal/main/gas/getsale',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: { gasid: wx.getStorageSync('gasid') },
success: function (res) {
console.log('success')
console.log(res.data)
that.setData({
responseData: res.data.response,
})
var gasnameArr = wx.getStorageSync('gasname');
var gasname;
if (gasnameArr.length != 0 && gasnameArr != undefined) {
gasname = gasnameArr.join(",");
if (gasname.length > 10) {
gasname = gasname.substring(0, 10) + "...";
}
}
that.setData({
gasname: gasname,
gasnameArr: wx.getStorageSync('gasname'),
})
},
fail: function (res) {
console.log('fail')
}

})




},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
let that =this;
var gasnameArr = wx.getStorageSync('gasname');
var gasname;
if (gasnameArr.length != 0 && gasnameArr != undefined) {
gasname = gasnameArr.join(",");
if (gasname.length > 10) {
gasname = gasname.substring(0, 10) + "...";
}
}
that.setData({
gasname: gasname,
gasnameArr: wx.getStorageSync('gasname')
})
/*wx.request({
url: require('../../config').getsaleUrl,
//url: 'http://localhost:8081/framework-protal/main/gas/getsale',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},

data: { gasid: wx.getStorageSync('gasid') },
success: function (res) {
console.log('success')
console.log(res.data)
that.setData({
responseData: res.data.response,
})
},
fail: function (res) {
console.log('fail')
}

}) */



wx.request({
url: require('../../config').getnumUrl,
//url: 'http://localhost:8081/framework-protal/main/gas/getsale',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},

data: {
gasid: wx.getStorageSync('gasid'),
type:0 //預設值為當天
},
success: function (res) {
console.log('success')
console.log(res.data)
that.setData({
numresponseData: res.data.response,
})
},
fail: function (res) {
console.log('fail')
}

})


},
//加油站點選事件
bindButtonTap: function (e) {
wx.redirectTo({
url: '/pages/personal/personal?userid=' + wx.getStorageSync('userid') + '&type=1',
})
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},

/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},

/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},

/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},

/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},

/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},

/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
},

/**
* 選單單擊
*/
onBarItemClick: function (e) {
let url = this.data.barItem[e.currentTarget.dataset.sno].url;
if (url == null || url == '') {
return;
}
wx.redirectTo({
url: url
})
},
/**
* 導航欄單擊
*/
onNavigation: function () {
wx.navigateTo({
url: '/pages/navigation/navigation'
})
},

onHotPro2: function(e) {
wx.navigateTo({
url: '/pages/groupLine/groupLine?id=' + e.currentTarget.id,
})
},

onHotPro3: function(e) {


wx.login({ //呼叫微信登入介面
success: function (res) {
wx.setStorageSync("code", res.code)
let code = wx.getStorageSync("code")
//
wx.request({
url: 'http://172.16.16.145:8180/wxService/wx/queryProductDetail',
method: 'GET',

data: {
id: 3,
},
success: function (res) {
console.log('success')
console.log(res)
},
fail: function (res) {
console.log('fail')
}
});
},
fail: function () {

}
});





wx.navigateTo({
url: '/pages/flowPay/flowPay',
})
},

onCase1: function(e) {

wx.navigateTo({
url: '/pages/case/case?id=' + e.currentTarget.id,
})
},
//輸入搜尋內容
searchmessage: function (e) {
this.setData({
searchmessage: e.detail.value
})
},
//點選搜尋
onsearch: function (e) {

wx.navigateTo({
url: '/pages/order/order?productName=' + this.data.searchmessage,
})
},
//點選註冊
regist: function (e) {
wx.navigateTo({
url: '/pages/login/reg/reg',
})
}
})
324 324   1 
// pages/index/index.js
2 
Page({
3
4 
/**
5 
* 頁面的初始資料
6 
*/
7 
data: {
8 
array: ['當天', '本月', '近三月','近半年','本年'],
9 
index: 0,
10 
date: '2016-09-01',
11 
time: '12:01',
12 
barItem: [
13 
{
14 
name: '利潤彙總',
15 
image: '../../images/menu1_unfocus.png',
16 
selectedImage: '../../images/menu1_focus.png',
17 
selected: false,
18 
color: '#666666',
19 
url: '/pages/solution/solution'
20 
},
21 
{
22 
name: '每日營業情況',
23 
image: '../../images/menu3_unfocus.png',
24 
selectedImage: '../../images/menu3_focus.png',
25 
selected: true,
26 
color:'#FF0000',
27 
url: '/pages/index/index'
28 
},
29 
{
30 
name: '運營支出',
31 
image: '../../images/menu2_unfocus.png',
32 
selectedImage: '../../images/menu2_focus.png',
33 
selected: false,
34 
color: '#666666',
35 
url: '/pages/order/order'
36 
},
37 
// {
38 
// name: '',
39 
// image: '../../images/menu4_unfocus.png',
40 
// selectedImage: '../../images/menu4_focus.png',
41 
// selected: false,
42 
// url: '/pages/personal/personal'
43 
// },
44 
],
45 
successresponseData: [],
46 
datalist:[]
47 
},
48
49 
//更新日期選型,重新整理取值
50 
bindPickerChange: function (e) {
51
52 
var that = this;
53 
console.log('picker傳送選擇改變，攜帶值為', e.detail.value)
54 
this.setData({
55 
index: e.detail.value
56 
})

相關推薦

小程式開發備忘

相關資料 小程式簡易教程 https://developers.weixin.qq.com/miniprogram/dev/ 框架介紹 https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 元件

微信小程序開發備忘

成了 代碼編輯器 導致 樣式表 創建文件 全局 一次 展開 登錄 前言 從去年一月份微信宣告要做小程序時的圈子裏已經有了局部躁動，去年九月內測時，更是全民熱捧，似乎張曉龍和他的微信已經準備好再一次改變世界。還好微信比它的粉絲們要理智的多，不做分發，不搞渠道，不發“紅利”，所

【備忘】微信小程式開發從入門到實戰視訊

第01講-小程式的背景.mp4 第02講-什麼是小程式.mp4 第03講-小程式生態及應用前景.mp4 第04講-小程式開發前的準備.mp4 第05講-安裝微信開發者工具.mp4 第06講-小程式程式碼結構簡介.mp4 第07講-小程式配置檔案介紹.mp4 第08講-開發者工

Excel 開發備忘

public ide pub sof source rop pla board put 1、裝完讀取插件才可以對EXCEL讀取 Excel 2010 讀取數據插件 https://www.microsoft.com/zh-CN/download/details.aspx?i

微信小程式開發--豆瓣圖書介面

由於微信小程式訪問豆瓣圖書介面的API被關閉， 所有從小程式端發起的訪問請求都會被拒絕， 403，禁止通訊。 其餘的資訊介面大都是http的，微信小程式中不允許訪問http， 我們通過中繼伺服器爬取並解析資料實現了一個可以在小程式中實現的圖書資訊查詢介面。 通過圖書的isbn 號碼查詢關於該圖書的各

微信小程式開發 筆記

1.[wxss]設定帶透明度的rgb顏色：rgb(0,0,0,0.5); 2.小程式使用類似於iOS的NSNotification：（第三方:https://github.com/icindy/WxNotificationCenter） (1)在需要收發通知的頁面引入WxNotification

微信小程式開發框架——WXSS（一）

    WXSS語言決定了小程式頁面的各個元素在視覺上的展示，WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。     width:用來設定元素'寬度' / height:用來設定元素'高度 '/

【純·技術乾貨】更 App 化的小程式開發

2018 年 10 月13 日，由又拍雲和知曉雲聯合主辦的 Open Talk 丨2018 小程式開發者沙龍系列活動廣州站拉開帷幕，糗事百科前端負責人宋航在沙龍上做了《更App化的小程式開發》的分享。 “2018 小程式開發者沙龍”是又拍雲 Open Talk 繼“2018 音視訊技術沙龍”後推出的重磅系列

小程式開發工具命令列啟動配置

在cmd視窗中使用命令啟動指定的小程式專案 命令形如： wechat -o miniapp-shops 1.自定義一個 wechat.bat 檔案，輸入以下程式碼： @echo off call C:"\Program Files (x86)\Tencent\微信web開發者

純正商業級應用-微信小程式開發實戰已更完

第1章 導學與申請appkey 如何更好的學習本課程？如何申請開發者key？如何呼叫和測試介面？ 1-1 微信小程式商業級實戰-課程導學。 1-2 優先自己開發 1-3 appkey的申請 1-4 課程維護說明 第2章 準備工作 開發前的準備工作以及第三方開發工具的選擇 2-1 流程與開發前準備 2

Taro：使用taro完成小程式開發

前言：taro是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程式端開發的一些內容。小程式專案搭建gitup已經有很清楚的說明：https://github.com/NervJS/taro 一.主要操作步驟及命令： 1.cnpm install -g @tarojs/cli 全域性安裝taro

微信小程式開發：二級、三級等多級聯動選單

二級級聯效果三級聯動效果 二級聯動和三級聯動的程式碼結構都是一樣，就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

微信小程式開發筆記5——元素隨著頁面滾動吸附在頂部的效果

現在很多app都有這樣的效果，某元素隨著頁面的滾動，吸附在頂部的效果。本文將介紹實現這種效果的兩種不同的方法。 先看一下效果圖： 使用IntersectionObserver 思路 上一篇部落格詳細介紹了IntersectionObserver的用法。這裡用來實現這種吸附的

微信小程式開發筆記4—— IntersectionObserver 用法詳解

看微信文件時看到這個很有趣的api，但是官方的文件和例子關於這個api的介紹都是很讓人失望的，所以花了點時間瞭解了以下這個方法，做個記錄，供參考。 簡介 首先，我的理解是，這是一個觀察器（廢話），它用來監測目標物件與某個參照物的相交情況。什麼是相交情況？通俗的說，就是兩個區域有重

微信小程式開發筆記2——自定義導航欄元件

本文主要是熟悉微信小程式自定義元件的開發，以一個常見的導航欄（Tabbar）需求為例。 官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 首先我們先看一

微信小程式開發-引入阿里巴巴向量icon圖示庫

先在阿里巴巴圖示庫下載icon圖示並儲存到專案裡，然後下載到本地。此步驟的壓縮檔案命名為壓縮1檔案。 解壓下載檔案，開啟轉換網址https://transfonter.org/，點選 Add fonts按鈕將iconfont.ttf檔案上傳上去，按圖操作就好。此步驟的壓縮檔案命名為壓縮2檔

在win10系統下，學習微信的小程式開發時遇到的問題，記錄一下解決經過

今天剛更新完win10系統下微信開發者工具v1.02.1810250版本，開啟開發者工具建立小程式，進入沒有看到專案,模擬器也無法正常顯示，大致如下圖. 開啟小程式所在的目錄卻能看見專案確實已經建立，但工具裡面沒顯示出來   匯入之前的打好的專案和官方的demo也沒

百度智慧小程式開源聯盟正式成立 小程式開發創業又一新風向標

在今年7月的百度AI開發者大會上，釋出了百度智慧小程式，並透露將在12月進行開源。 如今，12月未到，百度世界大會先至。會上，沈抖針對智慧小程式，推出了多項措施。 首先便是宣佈智慧小程式開源聯盟正式成立。首批聯盟成員包括愛奇藝、bilibili、DuerOS、Apollo等十多個App和平臺。沈抖

支付寶小程式開發之與微信小程式不同的地方

前言： 本文僅彙總微信小程式移植支付寶小程式過程中遇到的一些不同的地方，詳細請參考官方開發文件。 網路請求： 對於網路請求，基本上改動不大，也就支付寶小程式沒有responseType屬性及響應碼欄位改成了status。 使用者授權登入： 1. 登入： wx.login 　　====&nb

mpvue小程式開發 - 生命週期梳理

轉自IMWeb社群，作者：llunnn，原文連結 最近在開發小程式，嘗試性地使用了一下mpvue框架。 mpvue 是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式