微信小程序開發授權文檔(微信小程序授權登錄開發)

小程序開發 357
本篇文章給大家談談微信小程序開發授權文檔,以及微信小程序授權登錄開發對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。 本文目錄一覽: 1、微信小程序如何開發呢,有沒有知道的

本篇文章給大家談談微信小程序開發授權文檔,以及微信小程序授權登錄開發對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。

本文目錄一覽:

微信小程序如何開發呢,有沒有知道的

開發前準備:

注冊小程序帳號 綁定開發者

登錄微信公眾平臺小程序,進入用戶身份- 開發者,新增綁定開發者。

已認證的小程序可以綁定不多于20個開發者。未認證的小程序可以綁定不多于10個開發者。

獲取AppID下載并安裝開發者工具

下載完成后,使用管理員或者綁定的開發者微信號掃碼登錄。

一個微信小程序

創建項目

我們需要通過開發者工具,來完成小程序創建和代碼編輯。

開發者工具安裝完成后,打開并使用微信掃碼登錄。選擇創建“項目”,填入上文獲取到的 AppID ,設置一個本地項目的名稱(非小程序名稱),比如“我的第一個項目”,并選擇一個本地的文件夾作為代碼存儲的目錄,點擊“新建項目”就可以了。

為方便初學者了解微信小程序的基本代碼結構,在創建過程中,如果選擇的本地文件夾是個空文件夾,開發者工具會提示,是否需要創建一個 quick start 項目。選擇“是”,開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。

項目創建成功后,我們就可以點擊該項目,進入并看到完整的開發者工具界面,點擊左側導航,在“編輯”里可以查看和編輯我們的代碼,在“調試”里可以測試代碼并模擬小程序在微信客戶端效果,在“項目”里可以發送到手機里預覽實際效果。

編寫代碼創建小程序實例

點擊開發者工具左側導航的“編輯”,我們可以看到這個項目,已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。其中,.js后綴的是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件。微信小程序會讀取這些文件,并生成小程序實例。

//App() 函數用來注冊一個小程序。接受一個 object 參數,其指定小程序的生命周期函數等。

App({

onLaunch: function() {

// Do something initial when launch.

},

onShow: function() {

// Do something when show.

},

onHide: function() {

// Do something when hide.

},

globalData: 'I am global data'

})

app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API。

//app.js

App({

onLaunch: function() {

//調用API從本地緩存中獲取數據

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

getUserInfo: function(cb) {

var that = this;

if (this.globalData.userInfo) {

typeof cb == "function" cb(this.globalData.userInfo)

} else {

//調用登錄接口

wx.login({

success: function() {

wx.getUserInfo({

success: function(res) {

that.globalData.userInfo = res.userInfo;

typeof cb == "function" cb(that.globalData.userInfo)

}

})

}

});

}

},

globalData: {

userInfo: null

}

})

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導航條樣式,配置默認標題。注意該文件不可添加任何注釋。

{

"pages": [

"pages/index/index",

"pages/logs/logs"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

}

}

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

/**app.wxss**/

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

創建一個人品計算器小頁面

在這個教程里,我們有1個頁面,即歡迎頁,他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個頁面是小程序的首頁。

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結構文件。

index.wxml 是頁面的結構文件:

!--index.wxml--

text class='1f8e508697cc8803 title'人品查看器/text

text class='508697cc8803c38c hint'為您計算當下人品/text

button bindtap="setScore" class='97cc8803c38c5726 check'點擊查詢/button

view class="8803c38c5726c21d container"

view bindtap="bindViewTap" class="c38c5726c21d4c04 userinfo"

image class="5726c21d4c04b6cf userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"/image

text class="818710e0acb6dbc4 userinfo-nickname"{{userInfo.nickName}}/text

text class='8803c38c5726c21d score'{{score}}/text

text class='c38c5726c21d4c04 info'{{info}}/text

/view

/view

本例中使用了view/、image/、text/來搭建頁面結構,綁定數據和交互處理函數。

index.js 是頁面的腳本文件,在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例,聲明并處理數據,響應頁面交互事件等。

//index.js

//獲取應用實例

var app = getApp()

Page({

data: {

score: 0,

userInfo: {}

},

//事件處理函數

setScore: function() {

var score = 60+parseInt(Math.random()*40);

var infos = [

'哇,你當下神仙附體,快去勾搭妹子',

'太陽天空照,花兒對我笑',

'喂,你是豬嗎?離我遠點'

];

var info;

if(score90){

info=infos[0];

}else if(score75){

info=infos[1];

}else{

info=infos[2];

}

this.setData({

score:score,

info:info

})

},

onLoad: function () {

console.log('onLoad')

var that = this

//調用應用實例的方法獲取全局數據

app.getUserInfo(function(userInfo){

//更新數據

that.setData({

userInfo:userInfo

})

})

}

})

index.wxss 是頁面的樣式表:

/**index.wxss**/

.title{

font-size: 30px;

display: block;

padding: 10px;

font-weight: bold;

text-align: center;

}

.hint{

display: block;

padding: 10px 20px;

color:#999;

text-align: center;

}

.check{

width: 100px;

}

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

text-align: center;

display: block

}

頁面的樣式表是非必要的。當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。

index.json 是頁面的配置文件:

頁面的配置文件是非必要的。當有頁面的配置文件時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認配置。

運行結果如下:

手機預覽

開發者工具左側菜單欄選擇"項目",點擊"預覽",掃碼后即可在微信客戶端中體驗。

手機端效果

微信小程序用戶授權登錄

1、appid: 微信小程序/公眾號的唯一憑證,即 AppID。

獲取途徑:可在「微信公眾平臺 - 設置 - 開發設置」頁中獲得。(需要已經成為開發者,且帳號沒有異常狀態)

用途:小程序的 AppID 相當于小程序平臺的一個身份證,會在很多場景中使用,比如小程序的登錄、授權等

2、openID: openID 是微信生態下 應用的唯一標識 , ,即同一個用戶在不同的小程序下的openid是不同的。

獲取途徑:調用 auth.code2Session 接口,通過code(登錄憑證,調用wx.login獲?。?appid+appsecret(小程序密鑰,獲取方式和appid一樣)可以換取openid,即 靜默授權。

用途:用于在開發者系統中標識用戶信息

3、UnionID:UnionID 是微信生態下 用戶的唯一標識 ,換句話說,同一用戶,對同一個微信開放平臺下的不同應用,UnionID是相同的。

獲取途徑:綁定了開發者帳號的小程序,可以通過以下途徑獲取 UnionID。

1)開發者可以直接通過 wx.login + code2Session 獲取到該用戶 UnionID,無須用戶授權。

2)小程序端調用云函數時,可在云函數中通過 Cloud.getWXContext 獲取 UnionID。

用途:標識同一個微信開放平臺下的用戶,可用于去重判斷

也就是我們常用的微信移動端/PC端之間的掃碼登錄,PC端用微信掃碼登錄,微信移動端確認授權登錄后,應用可以從微信拿到用戶的open id或union id,將微信獲取的用戶信息與自己賬戶體系中的用戶身份進行關聯;

需要用戶確認登錄,這樣可以通過用戶的個人確認,獲取用戶全面的信息,無論是否關注相關微信公眾號等都可以獲取。

1、靜默授權不需要用戶確認,只需要用戶訪問某個網頁,屬于嵌套在普通網頁里的授權形式,但是只能獲取到用戶的唯一標示openid和union id,無法拿到用戶的微信頭像、微信名稱等個人信息,對于用戶的簡單認證還是很有用的。

2、靜默授權的過程:

1)調用 wx.login() 獲取 臨時登錄憑證code

2)調用 auth.code2Session 接口,換取用戶唯一標識 openID

3)調用本地后臺服務,將 openID 映射到本地的 userId

微信開發文檔-小程序登錄流程

參考文章:

1、 【微信小程序用戶授權登錄】

2、 微信第三方登錄(靜默授權和非靜默授權)

3、 openid會變嗎?微信小程序開發中的appid、openid、unionid使用總結

怎么自己制作微信小程序

如何制作微信小程序,首先我們需要從他的構成確定,微信小程序的制作需要的點有三個:設計、前端、后端。而相對簡單的微信小程序可能只需要設計、前端。

小程序制作所涉及到的設計:頁面的排版和美觀UI這些內容都是需要設計的,所以這個是需要你熟悉設計內容,用到的軟件是 PS,專業點還有 原型圖制作軟件:Mockplus 。

小程序制作的前端:設計排版和UI完成后需要前端工程師將其進行編程實現。所以你需要一個前端工具,微信自身是提供一個開發軟件的

或者你也可以使用其他的前端語言進行開發,然后選擇自己熟悉的編輯器。列舉幾個使用比較多的軟件:sublime text3 編輯器 、Beyond Compare 比較代碼工具、EditPlus 編輯器。

小程序制作需要用到的后端:前端完成后,如果你需要有些交互的功能則需要后端,當然后端也可以不要,純展示或者簡單交互的話前端就可以完成的,比較復雜業務和邏輯的內容才會需要后端,因此后端的內容會比較南。一般后端開發所使用的軟件就是idea了,本人就是一位Java程序員,專攻后端。用上后端意味著你還需要域名DNS和服務器等等的知識去支撐。所以后端一般用的軟件是:idea、Linux服務器、ftp(Windows與Linux之間的傳輸軟件)、xshell(這個比上一個好用一些,同樣的傳輸文件作用)、數據庫等等。

總結: 簡單版:一個設計工具 + 一個微信自帶的前端編輯器。 中等:設計工具 + 其他語言編輯器 +微信編輯器。 復雜: 設計工具+ 前端工具+后端工具。

微信小程序的正常流程:

1.注冊小程序

2.開發前準備

3.下載開發者工具開始制作

4.提交代碼

5.審核通過即可使用

軟件只需要一個:微信開發者工具(如果用第三方平臺的編輯器就不需要下載這個軟件開發小程序)

個人小程序建議自己寫代碼,因為每個人的想法都天馬星空,想展示的東西也不一樣,還有個性化需求,很難做出符合要求的小程序。所以自己制作很自由,慢慢做出自己滿意的效果。缺點就是,需要學習的東西很多。

商城小程序推薦直接用第三方的編輯器,因為不用學習新的知識,操作簡單,花費時間很短,發布幾個商品,編輯好小程序,提交審核就可以正常使用。需要準備:營業執照一張。

分步制作一個可以正常使用的微信小程序

這里介紹兩種方法,自己開發的制作流程和通過第三方平臺的制作流程。

自己開發

1.注冊

普通的注冊步驟就點立即注冊,跟公眾號登錄是同一個入口。

點“2”指向的地方-小程序圖標,是小程序開發文檔,底部也有注冊小程序的入口,點擊進入注冊。

認證郵箱

個人小程序和商城小程序

這一步你要選類型,是要開通個人,還是開通企業?

小程序類型選擇-輕棧截圖

如果這個小程序僅僅是展示用的小程序,那類型選擇個人就好了,免認證費。

如果是商家,想要小程序帶有支付系統,制作一個商城小程序,那就選擇用企業/組織認證。通過這種方式開通的小程序需要300認證費。

但如果你擁有一個認證過的企業類型公眾號,可快速注冊并注冊小程序。

復用公眾號資質注冊小程序

在公眾號后臺操作,點擊小程序管理小程序快速認證小程序。

2.開發前準備

1.綁定開發者

2.設置開發設置,獲取AppID

3.發布流程

需要下載的軟件--開發者工具

開發過程中有任何問題,可以參考微信文檔

通過第三方-零成本開通微信小程序商城

完全零基礎想要搭建一個微信小程序商城,有簡化了的步驟,不需要代碼,拖拽式模塊化設計,支付系統,營銷插件統統支持。

同樣零成本,甚至連小程序300認證費都可以免去。開發完成的小程序商城審核通過就可以立即投入運營。

通過輕棧注冊微信小程序,沒有公眾號也可以直接免300認證費注冊微信小程序。

注冊成功后不需要開發前準備,直接制作,拖拽式編輯,按住鼠標左鍵,把需要的模塊拉到合適的位置,松手,右鍵編輯。

輕?!綝esign Lab】編輯頁面

上架商品在電商系統

輕棧電商系統

一切準備就緒,就可以發布了,如果商品數量10個左右,整個制作過程約30分鐘。同樣的商城小程序效果,同樣的0成本,使用第三方可以節省很多時間和精力。

但模塊化,拖拽式的編輯器滿足不了所有商家的需求,功能再豐富也不可能100%覆蓋所有行業,要做出特別的效果,自己搞不定,第三方編輯器不好實現,那就找專業團隊去做吧。

企業微信中的小程序

在企業微信中使用小程序

概述

企業微信移動客戶端有內置小程序基礎庫,微信小程序可在企業微信上運行,同時開發者也可以針對企業微信提供的特殊接口開發出更適應于企業內部場景的小程序。需注意,企業微信只支持運行已在微信側上架的小程序。 更多詳細介紹可點擊查看 企業微信小程序開發文檔

小程序關聯到企業微信

目前,開發者可將小程序關聯到企業微信,關聯后可設置在企業微信的工作臺與個人對外信息展示小程序。

關聯入口

可通過以下兩個方式找到關聯小程序到企業微信的入口:

1.可前往企業微信管理后臺-進入應用與小程序-小程序-關聯小程序 詳情

2.登錄小程序管理后臺-設置tab-關聯設置,找到關聯到企業微信-前往關聯的入口?

關聯步驟

1.登錄企業微信管理后臺-進入應用與小程序-小程序-關聯小程序;或登錄小程序管理后臺-設置tab-關聯設置,找到關聯到企業微信-前往關聯的入口

2.關聯需要小程序開發者授權,故會跳轉到公眾平臺中進行一次授權掃碼,請使用要關聯的小程序所屬的管理員微信號進行掃碼授權

3.對小程序進行可見范圍的設置?

4.關聯完成,設置了可見范圍的企業成員可以在工作臺看到關聯的小程序。

注: 小程序被關聯到了哪些企業,可以統一在小程序后臺設置-關聯設置-關聯到企業微信中看到關聯記錄。

企業微信小程序開發文檔 企業微信提供了特有的API,可供開發者開發更適合企業場景的小程序;同時,由于平臺有差異性,會有一定適配工作;以及如何調試企業微信小程序等更多的開發相關文檔,請點擊查閱 企業微信開發文檔

微信小程序開發工具怎么用

在開發之前,必須先接入到微信第三方開發的授權。

1、微信小程序注冊:在微信公眾平臺注冊小程序,完成注冊后可以同步進行信息完善和開發。

2、微信小程序信息完善:填寫小程序基本信息,包括名稱、頭像、介紹及服務范圍等。

3、微信小程序開發:完成小程序開發者綁定、開發信息配置后,開發者可下載開發者工具、參考開發文檔進行小程序的開發和調試。

4、微信小程序提交審核和發布:完成小程序開發后,提交代碼至微信團隊審核,審核通過后即可發布(公測期間不能發布)5 itjob祝你成功

微信小程序開發文檔有哪些類型

一個微信小程序最多關聯5個服務類目,一個月內可申請修改3次。

類目資質:小程序對一些服務類目的資質要求比公眾號多,甚至高于APP發布,不要試圖關聯無資質要求的類目A,卻跨界做了類目B的事情無法上線或被下線。

一些資質提示:

互聯網軟件和服務:一些類目要求兩證二選一:《增值電信業務經營許可證》,《電信與信息服務業務經營許可證》,對于創業企業和中小團隊會是門檻。

生活服務/工具類目:比較開放,對特殊資質無要求。

社交類目:普遍要求兩證選一:《增值電信業務經營許可證》,《電信與信息服務業務經營許可證》,很多應用服務即便不是純社交,但若帶有社交屬性,要特別注意審核規則。

富媒體類目:內容形式與相關資質要求,內容創業和內容服務需要關注,比公眾號資質要求多。

電商/店鋪:商家自營線上和線下店鋪,除食品保健等既有資質,無其它特殊要求;但是對平臺電商要求兩證選一《增值電信業務經營許可證》,《電信與信息服務業務經營許可證》。

醫療/金融業類目:既有的行業管制和資質,小程序也有相關審核要求。

微信小程序開發授權文檔的介紹就聊到這里吧,感謝你花時間閱讀本站內容,更多關于微信小程序授權登錄開發、微信小程序開發授權文檔的信息別忘了在本站進行查找喔。

掃碼二維碼
黄色网站久久