將想法與焦點(diǎn)和您一起共享
微信小程序注冊(cè)登錄思路 (這是根據(jù)自身的項(xiàng)目的思路,不一定每個(gè)項(xiàng)目都適用) 1.制作授權(quán)登錄框,引導(dǎo)用戶(hù)點(diǎn)擊按鈕2.uni.login獲取code3.把code傳給后端接口,后端返回如下數(shù)據(jù) openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 狀態(tài)碼:status==0(該用戶(hù)未注冊(cè),需調(diào)用注冊(cè)接口) status==1(該用戶(hù)已注冊(cè)) 4.判斷用戶(hù)是否注冊(cè),并調(diào)用用戶(hù)信息接口(1)若已注冊(cè)則提示登錄成功,并調(diào)用后臺(tái)給的獲取用戶(hù)信息的接口,并把數(shù)據(jù)保存到vuex(2)若未注冊(cè)則調(diào)用注冊(cè)接口,注冊(cè)成功之后調(diào)獲取用戶(hù)信息…
小程序分享二維碼思路:a分享二維碼給b,二維碼上帶有a的標(biāo)識(shí)ppidb接收a的二維碼打開(kāi)頁(yè)面,將接收到的ppid傳遞給后臺(tái),后臺(tái)就可以知道b是通過(guò)a的二維碼打開(kāi)的頁(yè)面 1.在后臺(tái)設(shè)置識(shí)別二維碼進(jìn)入的頁(yè)面,這里用index頁(yè)面。2.在index頁(yè)面是接收二維碼里面的參數(shù),解析并截取獲取。二維碼的參數(shù)格式:scene=ppid:12 export default { data() { return { ppid: "", } }, onLoad(option) { // 解析二維碼里面的參數(shù)獲得ppid this.…
前言 出于多端投放和開(kāi)放生態(tài)的考慮,閑魚(yú)開(kāi)始接入整個(gè)阿里小程序體系。閑魚(yú)在9月份迅速上線(xiàn)了第一個(gè)小程序魚(yú)塘小程序,由于剛接觸不熟悉小程序體系,整體性能上有比較大的優(yōu)化空間,主要表現(xiàn)在以下問(wèn)題: 小程序加載慢,低端 Android 機(jī)(Android vivo Y67)上首屏?xí)r間接近6s 滾動(dòng)卡頓,在 iPhone 7P 上滾動(dòng)幀率平均在 40fps 左右 滾動(dòng)多屏數(shù)據(jù)之后 Tab 點(diǎn)擊切換慢,在 iPhone 7P 上切換 Tab 等待時(shí)間 3-5 秒,瞬時(shí)幀率低于 30fps小程序由于其邏輯和渲染分離的架構(gòu)特點(diǎn),除傳…
自從Alita發(fā)布以來(lái),由于A(yíng)lita和Taro一樣都是React語(yǔ)法在小程序上的處理, 所以一直有很多人問(wèn)我“已經(jīng)有Taro了,為什么又造輪子呢??”,今天用這篇文章統(tǒng)一回答一下。 首先我們看下Taro,他是一套遵循 React 語(yǔ)法規(guī)范的 多端開(kāi)發(fā) 解決方案。他遵循 React 語(yǔ)法規(guī)范,采用與 React 一致的組件化思想,組件生命周期與 React 保持一致,同時(shí)支持使用 JSX 語(yǔ)法,讓代碼具有更豐富的表現(xiàn)力,使用 Taro 進(jìn)行開(kāi)發(fā)可以獲得和 React 一致的開(kāi)發(fā)體驗(yàn)。 截止本文開(kāi)始的時(shí)候,Taro在github上已…
需求描述: 1.正常播放音頻2.可以滑動(dòng)進(jìn)度條3.可以切換上一條,下一條音頻4.退出當(dāng)前頁(yè)或關(guān)閉小程序之后仍然可以正常播放5.試聽(tīng)功能進(jìn)入該播放頁(yè)不可以播放上一條,下一條6.退出該頁(yè)面或小程序之后,再次回到該頁(yè)面,播放條自動(dòng)到當(dāng)前播放進(jìn)度 圖二圖三是關(guān)閉小程序之后微信頁(yè)面的展示,可以通過(guò)懸浮關(guān)閉該音頻。 參考文檔[小程序官方文檔--背景音頻] ?? 使用小程序 BackgroundAudioManager,需要在 app.json配置相關(guān)參數(shù) "requiredBackgroundModes": [ "audio" ] 代碼 …
微信小程序第一次拒絕地理位置授權(quán),是不可以再次談起授權(quán)彈框的,想要再次授權(quán)只能打開(kāi)設(shè)置面板 uni.openSetting({ success(res) { console.log(res.authSetting) } }); getLocal() { uni.openSetting({ success: (res) => { if(res.authSetting) { var that = this uni.getLocation({ type: 'gcj0…
前言 之前寫(xiě)個(gè)一個(gè)版本的[多圖下載],重構(gòu)進(jìn)行了代碼升級(jí)讓代碼更加簡(jiǎn)介分為兩步:第一獲取保存到相冊(cè)權(quán)限第二下載圖片主要涉及兩個(gè)文件,index.js 和download.js另外現(xiàn)在如果有圖片下載失敗也彈出下載完成后續(xù)需要優(yōu)化 核心代碼 /** * 獲取相冊(cè)權(quán)限 */ export function wxSaveAuth() { return new Promise((resolve, reject) => { wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { …
小程序原生開(kāi)發(fā)有不少槽點(diǎn): 原生wxml開(kāi)發(fā)對(duì)Node、預(yù)編譯器、webpack支持不好,影響開(kāi)發(fā)效率和工程構(gòu)建流程。所以大公司都會(huì)用框架開(kāi)發(fā) 微信定義的這套語(yǔ)法,wxml、wxs,以及wx:if等語(yǔ)法,私有化太強(qiáng)。不如正經(jīng)學(xué)vue,學(xué)會(huì)了全端通用,而不是只為微信小程序 vue生態(tài)里有太多周邊工具,可以提高開(kāi)發(fā)效率,比如ide、校驗(yàn)器、三方庫(kù)。。。而微信的開(kāi)發(fā)者工具和專(zhuān)業(yè)編輯器相比實(shí)在不好用,個(gè)性化設(shè)置也非常少 作為前端工程師,除了微信小程序,還要開(kāi)發(fā)web、其他小程序甚至App,…
直接上代碼`function setOption(paramChart, title, chartType, xdata, ydata,yscale, dataFlag) { let intervalVal = 0 if (dataFlag == 'staffAct') { intervalVal = 'auto' } else { intervalVal = 0 } const option = { color: ['#fff'], title: { text: '', x: 'left', y: 'top', padding: 5, textStyle: { fontSize: 12, color: '#fff' }, }, grid: { left: '3%', …
基于Taro + Taro-ui + 微信云開(kāi)發(fā) 初步實(shí)現(xiàn)了一個(gè)小程序 小程序碼 開(kāi)始 CLI 工具安裝 首先,你需要使用 npm 或者 yarn 全局安裝@tarojs/cli,或者直接使用npx: # 使用 npm 安裝 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安裝 CLI $ yarn global add @tarojs/cli # OR 安裝了 cnpm,使用 cnpm 安裝 CLI $ cnpm install -g @tarojs/cli 項(xiàng)目初始化 使用命令創(chuàng)建模板項(xiàng)目 taro init taro-timer 按提示進(jìn)行相應(yīng)的選擇(微信云開(kāi)發(fā)可直接選擇wxc…
即使是戰(zhàn)爭(zhēng),也要像西伯利亞風(fēng)雪中挺拔的白樺,出落得亭亭玉立,楚楚動(dòng)人。 相信只要開(kāi)發(fā)過(guò)小程序,對(duì)wx.navigateBack 這個(gè) api都不會(huì)陌生。在摩拜單車(chē)的小程序中,它也被改造的更方便滿(mǎn)足復(fù)雜的業(yè)務(wù)需求,可謂之 增強(qiáng)型的 wx.navigateBack。 先來(lái)看看官方文檔中的用法: wx.navigateBack({ delta: 2 }) delta 表示返回的層級(jí)數(shù)。通過(guò)具體的業(yè)務(wù)示例來(lái)說(shuō)明我們?nèi)绾胃脑焖? 余額充值的例子 兩個(gè)頁(yè)面: A 頁(yè)面展示用戶(hù)余額,使用 H5 實(shí)現(xiàn),通過(guò) web-view 嵌套在小程…
人活著,總得要點(diǎn)英雄主義的,哪怕失敗、死亡。 也許在小程序所有生命周期里,我們用的最多的就是 onLoad,一大堆代碼都要在初始化的時(shí)候執(zhí)行。 很多時(shí)候,初始化的代碼是每個(gè)頁(yè)面共用的,比如獲取用戶(hù)信息、獲取定位等: Page({ onLoad() { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 業(yè)務(wù)代碼 // ... } }) } // ... }) 久而久之,每個(gè)頁(yè)面的 js 里都是如上的重復(fù)代碼。如果…
當(dāng)用戶(hù)在小程序內(nèi)發(fā)起對(duì)話(huà),你是在后臺(tái)抓緊安排人工回復(fù)嗎? 由于等待回復(fù)時(shí)間過(guò)長(zhǎng),用戶(hù)產(chǎn)生不滿(mǎn)并棄用了你的小程序。 “秒回”是對(duì)話(huà)的基本要求,及時(shí)回復(fù)才能給到用戶(hù)尊重和被重視感。然而,受人力成本的因素影響,專(zhuān)業(yè)客服往往需要1對(duì)N,在對(duì)話(huà)需求激增的情況下,回復(fù)并不高效。其實(shí),用戶(hù)發(fā)起對(duì)話(huà),需求大概分為兩種:服務(wù)和咨詢(xún)。當(dāng)用戶(hù)只是要獲取固定服務(wù)的渠道,可以通過(guò)AI機(jī)器人解答用戶(hù)的問(wèn)題。 然而目前的情況是,AI對(duì)話(huà)能力并不是每個(gè)小程序開(kāi)發(fā)團(tuán)隊(duì)都能自行開(kāi)發(fā)…
小程序生成圖片分享朋友圈 小程序開(kāi)發(fā)者都希望自己的小程序得以廣泛傳播,因?yàn)椴簧傩〕绦蚨荚O(shè)計(jì)了很多轉(zhuǎn)發(fā)激勵(lì)行為,但分享小程序到朋友圈(或其他外部平臺(tái))一直是一個(gè)難題。一個(gè)常見(jiàn)但方案就是生成分享海報(bào)、分享圖片。但生成分享圖片在技術(shù)上卻也是一個(gè)難題。 技術(shù)選型 目前常用技術(shù)方案基本分為三種: 使用 canvas 繪圖并生成 使用后端繪圖庫(kù)進(jìn)行繪制,返回給小程序端 使用服務(wù)端開(kāi)一個(gè)瀏覽器進(jìn)行 HTML 渲染,并截圖返回給小程序端 第一種方案:要求較高,canvas 和…
我在嚴(yán)冬下掘起結(jié)冰的泥土,我在黑暗的戰(zhàn)壕里躍動(dòng),我用生命守護(hù)房屋的石板,我在散發(fā)著焦土味的廢墟下長(zhǎng)眠。 小程序中,除了每個(gè)頁(yè)面有自己的 data,還有個(gè)全局?jǐn)?shù)據(jù)存儲(chǔ)地方:globalData,獲取方式如下: let globalData = getApp().globalData 實(shí)際業(yè)務(wù)代碼中總會(huì)遇到這種情況:寫(xiě)著寫(xiě)著發(fā)現(xiàn)需要用全局?jǐn)?shù)據(jù),但是不能直接就在當(dāng)前函數(shù)里直接寫(xiě)上面的一段代碼,因?yàn)橐蛣e的函數(shù)共用,所以返回 js 文件頂部添加一段代碼,再返回剛剛斷掉的地方繼續(xù)寫(xiě),類(lèi)似這樣: // 省略1…
在公司小程序也開(kāi)發(fā)了一段時(shí)間了,中間遇到過(guò)很多問(wèn)題,特此記錄幾個(gè)比較典型的問(wèn)題和解決方案。 一、textarea 的高層級(jí)問(wèn)題 此問(wèn)題提供源碼demo,可導(dǎo)入微信開(kāi)發(fā)者工具查看。 癥狀(表現(xiàn)) textarea 是小程序的原生組件,它的一個(gè)表現(xiàn)就是優(yōu)先級(jí)很高,這導(dǎo)致了一些困擾,比如我們有一個(gè)表單頁(yè)面,最下面就是一個(gè)textarea和一個(gè)保存按鈕,這會(huì)導(dǎo)致textarea的文字會(huì)浮現(xiàn)在按鈕上。如下圖: 它最大的問(wèn)題時(shí)會(huì)導(dǎo)致保存按鈕可能點(diǎn)擊無(wú)效或者會(huì)彈出鍵盤(pán),并且開(kāi)發(fā)者工具模擬器和真機(jī)…
小程序webview的限制 相信開(kāi)發(fā)小程序的同學(xué)萌都知道,小程序的發(fā)布需要審核,這相對(duì)于web前端來(lái)說(shuō)靈活性差了不少。加上項(xiàng)目代碼體積的限制,我們有時(shí)候會(huì)在小程序里內(nèi)嵌webview,這樣就解決了上面講的兩個(gè)問(wèn)題。但是,由于小程序設(shè)定了存在webview的頁(yè)面,webview組件層級(jí)一定是最頂層的,也就是無(wú)法使用原生小程序提供的其他組件。例如Button。Button是具有多種open-type的,有時(shí)候我們需要做一些分享,那么內(nèi)嵌webview的頁(yè)面該怎么做呢? 利用小程序內(nèi)嵌webview暴露的wx.miniProgr…
窗外,是5月明媚的陽(yáng)光,澄澈蔚藍(lán)的天空,有炮彈歡快地叫著飛過(guò)。50多年過(guò)去了,我依然如此清晰地記得。 在一些框架中發(fā)現(xiàn)會(huì)提供一個(gè)很實(shí)用的功能:攔截器(interceptor)。例如要實(shí)現(xiàn)這個(gè)需求:小程序每次獲取到定位后都存到 globalData 里: wx.getLocation({ // .. success(res) { getApp().globalData.location = res // ... } }) 如果每一處使用 wx.getLocation 的地方都這么寫(xiě)也沒(méi)啥大問(wèn)題,但總顯得不夠“智能”,一方面是多了重復(fù)代碼,另一方面如果需…
告訴元首我已盡力,告訴父親我仍然愛(ài)他! 熟悉 Vue 的同學(xué)對(duì) computed 和 watch 一定很熟悉,這些特性大大方便了我們對(duì)代碼中的數(shù)據(jù)進(jìn)行處理: var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計(jì)算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實(shí)例 return this.message.split('').reverse().join('') } } }) var vm = new Vue({ el: '#demo', data: { firstName: 'Fo…
戰(zhàn)爭(zhēng),信念,意志和情感,這些散發(fā)著光芒和硝煙的詞匯,象一枚枚炮彈轟入我們現(xiàn)在的生活。歷史的記憶不會(huì)被抹滅。 當(dāng)我們?cè)诟髯皂?xiàng)目里幸福的拷貝著官方代碼 demo,在 componnets 文件夾里使用 Component 方法書(shū)寫(xiě)一個(gè)個(gè)組件時(shí),不要忘記,在 2018 年上半年以前,小程序是沒(méi)有提供組件化方案的。 當(dāng)時(shí),主要有兩種解決方法,一種是 WePY 拷貝法,另一種則是摩拜 template 法。 WePY 拷貝法 比如有個(gè)最簡(jiǎn)單的按鈕組件: <!-- components/button.wpy --> <template&…
第一次在公司里負(fù)責(zé)做小程序,因?yàn)榈谝淮巫雠掠龅酱罂?,所以用的原生開(kāi)發(fā)。頁(yè)面數(shù)據(jù)共享比較常用,所以來(lái)研究研究。 A頁(yè)面直接url傳參 B頁(yè)面onload里接收。這種簡(jiǎn)單粗暴但B如果還想給A傳參感覺(jué)不太方便。而且傳一個(gè)很大的對(duì)象過(guò)去,必須要stringfy。但是地址長(zhǎng)度有限所以會(huì)有bug 直接wx.setStorage 簡(jiǎn)單粗暴,直接存微信本地。有時(shí)候我并不想存太久,只是臨時(shí)的數(shù)據(jù)也給我存本地了感覺(jué)怪怪的。 getCurrentPages() 這個(gè)可以拿當(dāng)前的頁(yè)面棧,通過(guò)他來(lái)那上一個(gè)頁(yè)面,上上個(gè)頁(yè)面的…
學(xué)完 DeepLearning 系列課程后就想做一個(gè)小應(yīng)用試試。一開(kāi)始基于 RNN 訓(xùn)練了個(gè)古詩(shī)機(jī)器人,這個(gè)做的人很多,于是換了宋詞。宋詞是基于詞牌生成,相對(duì)數(shù)據(jù)量比較少,基于 RNN 訓(xùn)練效果很一般。后來(lái)了解到了 Transformer 算法感覺(jué)發(fā)現(xiàn)了生機(jī),訓(xùn)練了一下感覺(jué)效果真是不錯(cuò)。 使用效果測(cè)試的話(huà)可以直接掃碼訪(fǎng)問(wèn)這個(gè)小程序玩玩, 或者小程序搜索 【小詩(shī)一首】: 這是生成的例子: Transformer (Attention Is All You Need) 介紹 Transformer 是 Google 于 2017 年在 Attention Is All …
登錄和獲取用戶(hù)信息是小程序中最基本的兩步操作,但是由于之前小程序官方開(kāi)始時(shí)的設(shè)計(jì)缺陷,導(dǎo)致很多開(kāi)發(fā)者將登錄和獲取用戶(hù)信息綁定使用,盡管后來(lái)小程序wx.getUserInfo接口調(diào)整為:在用戶(hù)未授權(quán)過(guò)的情況下調(diào)用此接口,將不再出現(xiàn)授權(quán)彈窗,會(huì)直接進(jìn)入 fail回調(diào),但是改了之后,依舊有不少開(kāi)發(fā)者對(duì)這兩步的概念混淆不清,接下來(lái)這篇文章將會(huì)詳細(xì)介紹小程序這兩步操作 登錄 wx.login()用來(lái)做登錄的方法,調(diào)用接口獲取登錄憑證,code發(fā)送給后端用于置換session_key和openid等數(shù)據(jù),接…
微信小程序中嵌入html使用如下標(biāo)簽<rich-text nodes="{{--}}"></rich-text>之前一個(gè)需求開(kāi)發(fā)當(dāng)中,需要在小程序中套入頁(yè)面,小程序官方方法如上,但是又很多問(wèn)題,比如樣式問(wèn)題沒(méi)辦法修改,經(jīng)搜索的替換標(biāo)簽方法未生效,因?yàn)槭呛笈_(tái)返回,后端人員并不想他們處理兩次標(biāo)簽,只想和h5,pc公用一套 經(jīng)多方實(shí)驗(yàn)溝通采用了如下方法,后端去掉html body等頭部,保留信息片段,前端創(chuàng)建專(zhuān)門(mén)的展示頁(yè)面,如:`<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l…
不支持 svg 標(biāo)簽 web 可以,但是小程序不可以,只能使用 image 標(biāo)簽引用 svg 文件。 解決辦法 有第三方插件可以提供變相支持:https://github.com/Tencent/omi/tree/master/packages/cax 但有實(shí)際使用存在偏差,不建議使用。 瀏覽器效果: 小程序效果: 不支持內(nèi)嵌圖片的 svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="https://mdn.mozillademos.org/files…
你也許并不需要小程序框架。 市面上不停的會(huì)有大的公司推出自己的小程序的研發(fā)庫(kù) / 框架,功能十分強(qiáng)大,也為小程序的開(kāi)發(fā)帶來(lái)了便利。但在一些積極的反饋中,我們也看到不一樣的聲音: @白小蟲(chóng):又一個(gè)輪子。。 @jsweber:小程序不用任何框架,開(kāi)發(fā)體驗(yàn)也不錯(cuò)啊,本身就借鑒了 vue 和 react 的思想。 @月月木子:現(xiàn)在中上流公司的前端都很熱衷于造自己的輪子或者給別人的輪子換皮然后說(shuō)是自己的輪子,瘋狂壘高自身的技術(shù)壁壘,即有了給領(lǐng)導(dǎo)吹牛的資本,讓新來(lái)的人肯定屬于…
微信小程序授權(quán)登錄基本是小程序的標(biāo)配了,但是官方的demo,取消授權(quán)后,就不能再重新點(diǎn)擊登錄,除非重新加載小程序才可以,這下怎么辦? 我們可以先在首頁(yè)引導(dǎo)用戶(hù)點(diǎn)擊,然后跳轉(zhuǎn)到一個(gè)新的頁(yè)面,在新的頁(yè)面進(jìn)行授權(quán),然后新的頁(yè)面授權(quán)成功,立馬跳回首頁(yè),顯示用戶(hù)信息。 話(huà)不多說(shuō),直接上代碼 代碼結(jié)構(gòu): index是首頁(yè)login是授權(quán)頁(yè) 首頁(yè)代碼 index.wxml <!-- 未授權(quán),只顯示一個(gè)授權(quán)按鈕 --> <view wx:if="{{result==false}}"> <button bindtap="getinfo…
小程序 input 數(shù)據(jù)雙向綁定,實(shí)現(xiàn)方法之一 我們都知道 vue 中可以使用 modal 來(lái)實(shí)現(xiàn) input 內(nèi)容數(shù)據(jù)的雙向綁定。 小程序好像沒(méi)有提供相應(yīng)的方法支持,就需要我們自己寫(xiě)了。 原理 很簡(jiǎn)單,在 input 上先綁定需要取值的變量,如這個(gè)變量名是 name,然后再定義一個(gè)用于指向變量名的屬性 data-modal 這個(gè)屬性值設(shè)置為 name,在 input 的綁定方法中將這個(gè)屬性值取出,就會(huì)知道這個(gè) input 綁定了哪個(gè)變量,然后再將 input 的當(dāng)前值賦給這個(gè)變量即可。 實(shí)現(xiàn) wxml <input id='name' …
微信宣布小程序?qū)⒖梢栽赑C端微信打開(kāi)后,智庫(kù)君就接到要求,需要兼容PC端小程序,一開(kāi)始以為官方已經(jīng)做了完美適配,不需要改什么,但當(dāng)本人下載內(nèi)測(cè)版開(kāi)始測(cè)試的時(shí)候,才發(fā)現(xiàn)或許坑還挺多的~~~ 下面分享下本人“搬磚填坑”的全過(guò)程:(以下都是PC端小程序特有的問(wèn)題,手機(jī)端正常) 先說(shuō)下使用流程 微信開(kāi)發(fā)者工具菜單欄點(diǎn)擊 設(shè)置->通用設(shè)置,在自動(dòng)預(yù)覽部分勾選“啟動(dòng) PC 端自動(dòng)預(yù)覽”。 使用自動(dòng)預(yù)覽功能,點(diǎn)擊 預(yù)覽->自動(dòng)預(yù)覽->編譯并預(yù)覽,成功的話(huà)將在微信 P…
小程序重構(gòu),采用 uniapp 框架。記錄一下踩過(guò)的坑。關(guān)于用戶(hù)拒絕再次調(diào)起授權(quán),及如何識(shí)別語(yǔ)音識(shí)別、微信地址、附近地址的處理。 語(yǔ)音識(shí)別 組件 語(yǔ)音識(shí)別,小程序只有錄音功能,若要識(shí)別錄音文件,常規(guī)做法是把錄音文件傳遞給后端,然后由后端調(diào)用百度或訊飛語(yǔ)音識(shí)別接口,然后返回結(jié)果。 但是微信小程序官方提供了“同聲傳譯”插件,支持前端直接識(shí)別??蓞⒖迹翰寮榻B、插件使用文檔 uniapp 插件配置,在 manifest.json 文件中,源碼模式,加入: ... "mp-weixin…
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.