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