欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解微信小程序開發(fā)(項目從零開始)

 更新時間:2019年06月06日 14:46:36   作者:Mr.聶  
這篇文章主要介紹了詳解微信小程序開發(fā)(項目從零開始),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、序

微信小程序,估計大家都不陌生,現(xiàn)在應(yīng)用場景特別多。今天就系統(tǒng)的介紹一下小程序開發(fā)。注意,這里只從項目代碼上做解析,不涉及小程序如何申請、打包、發(fā)布的東西。(這些跟著微信官方文檔的流程走就好)。好了廢話不多說,看目錄。

注: 小程序是一套特殊的東西,融合了原生和web端。他是一個不完整的瀏覽器對象,所以很多DOM 、 BOM 的東西無法使用,但是他又通過微信APP實現(xiàn)了多線程。

二、如何創(chuàng)建小程序

很簡單,首先下載微信開發(fā)者工具,下載穩(wěn)定版本的就好。 下載 然后,創(chuàng)建小程序,可以參考下述圖片:

 

 

注意正式的小程序需要審批,拿到正式的APPID,我們測試的或者暫時沒有的可點那個測試的appid,小程序模板選擇默認就好。按照這樣的流程走完,我們就創(chuàng)建完一個小程序了。

三、webstrom支持小程序開發(fā)

創(chuàng)建完小程序之后,我們先不著急開發(fā)。工欲善其事必先利其器,微信開發(fā)者工具有點卡,而且功能少,開發(fā)效率很低。所以我們還是改造自己的編譯器,這里只介紹2種方法。一是 hbuilderX,他有支持小程序的模塊,很小巧的一款編譯器; 二是 webstorm,我用的他,在這介紹一下配置的方法,其他的大家自行g(shù)oogle吧。

1、支持wxml和wxss的文件類型,有語法高亮。 打開webstorm編譯器,依次點擊 文件 -- 設(shè)置 -- 編輯器 -- 文件類型 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了

2、支持小程序代碼提醒。 下載 這個文件,然后,把他放到一個顯眼的地方; 然后, webstorm 點擊 文件 -- 導(dǎo)入設(shè)置 ,找到這個下載的文件,點擊確定即可。

以上就是webstorm支持小程序語法的操作。

四、基礎(chǔ)文件目錄詳解

然后解釋一下小程序的目錄結(jié)構(gòu)。

project.config.json: 小程序的配置文件,包含項目打包配置、上傳代碼自動壓縮等等,是一些開發(fā)、打包之類的配置。

app.json: 當前項目的配置文件。包括項目的頁面引入、導(dǎo)航條顏色、導(dǎo)航條標題 等等,是項目具體到代碼開發(fā)上的配置。介紹幾個配置:

pages: 包含的頁面。每次新增頁面都得在這里引入,否則新頁面的json配置等無法生效。 注意pages中頁面先寫的先渲染,所以數(shù)組第一條也就是我們的首頁。

window: 配置所有頁面導(dǎo)航條字體、顏色、背景色等

app.js: 小程序入口文件。生成小程序?qū)嵗珹pp({}), 通常在這獲取用戶信息、授權(quán)信息、定義全局變量等。

app.wxss: 小程序全局 style 文件。對整個項目頁面生效。通常規(guī)定項目的 字體、基礎(chǔ)顏色,定義一些公共樣式。

utils: 工具函數(shù)目錄。通常用來放一些公共的js方法。比如封裝的request請求,一些別的處理數(shù)據(jù)什么的方法。

pages: 小程序的頁面目錄。所有的小程序頁面,都寫在這里面。

五、完善項目目錄

上邊大致解釋了一下小程序的基礎(chǔ)文件,現(xiàn)在按照常見的規(guī)范完善一下項目目錄,這里面包含一些個人見解,有需要的參考即可。先看一下結(jié)果:

現(xiàn)在解釋一下這些目錄:

components: 我們封裝的小程序可復(fù)用組件。

constants: 一些項目中的常亮。

image: 用到的圖片。

services: 用到的所有接口目錄

大致就新建了這幾個,如果有別的需求,根據(jù)自己的情況增加。

六、基礎(chǔ)語法詳解

現(xiàn)在大致解釋一下小程序的語法。首先, 創(chuàng)建新頁面,默認都創(chuàng)建 *.wxml *.wxss *.js *.json 和我們平時寫的代碼差不多,都是html js css,多了個json配置文件

*.json:常用的屬性有2大塊,navigationBarTitleText 相關(guān)的設(shè)置頂部標題的,usingComponents 引用的組件

*.js:getApp() 獲取小程序?qū)嵗?,拿全局變量等?Page({}) 創(chuàng)建頁面; data 當前頁面的變量;onLoad 生命周期,頁面加載完畢。

*.wxml:注意,小程序支持的標簽很少,像 span 是支持的,div不支持,一般用view代替塊級,span、text 代替行級。

*.wxss:大部分css選擇器不支持,支持的好像才5個,想支持less等得自己配置   

// json文件
{
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText":"我的",
 "usingComponents": {
 "menu": "/components/menu/index"
 }
}

// js文件
const app = getApp()
Page({
 data: {},
 
 onLoad: function () {},

})

七、實現(xiàn)頁面跳轉(zhuǎn)

和通常的web開發(fā)一樣,小程序頁面跳轉(zhuǎn)頁分2中,wxml中的vavigator標簽,以及js的navigator相關(guān)的api。路由跳轉(zhuǎn)的方法有好幾個,這里不一一贅述了,常用的直接跳轉(zhuǎn)

wx.navigateTo,重定向 wx.redirectTo等等,具體的請看官方文檔。這里強調(diào)一下路由傳參,很簡單:
1、少量數(shù)據(jù)。直接問號傳參。然后在目標頁面的onLoad方法中通過options參數(shù)接收。
2、大量數(shù)據(jù)。直接塞到全局變量里面。

// wxml跳轉(zhuǎn)頁面
<navigator url="/pages/my{{item.path}}" class="navigator">
  <image class="imgIcon" src="{{item.icon}}"></image>
  <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
 </navigator>

//js跳轉(zhuǎn)頁面
wx.navigateTo({
  url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
 })

//路由傳參如何接收


 onLoad: function (options) {
   console.log(options)
 },

八、wx.request 的封裝

在utils中新建request.js,簡單封裝了一下,一些數(shù)據(jù)要全局配置的都引進來,然后做了些錯誤的統(tǒng)一處理,沒什么難度,不過要特別注意一下cookie的攜帶。具體代碼如下:

const app = getApp()
export default function request(url, options = {}) {
 return new Promise(function (resolve, reject) {
 wx.request({
  url: `${app.origin}${url}`,
  method: 'GET',
  ...options,
  data: options.data,
  header: {
  'content-type': 'application/json',
  'cookie': wx.getStorageSync("cookie")
  },
  success: function (res) {
  //重新授權(quán)登錄
  if (res.statusCode === 401){
   wx.redirectTo({url: '/pages/login/index'})
   return
  }else if (res.statusCode !== 200) {
   reject({ error: '服務(wù)器忙,請稍后重試', code: 500 });
   return
  } else {
   if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
        
   if (cookie) wx.setStorageSync("cookie", cookie);
   }
   resolve(res.data);
  }
  },
  fail: function (res) {
  // fail調(diào)用接口失敗
  if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
   if (cookie) wx.setStorageSync("cookie", cookie);
  }
  reject({ error: '網(wǎng)絡(luò)錯誤', code: 0 });
  }
 })
 })
}

然后我們使用的時候直接使用封裝好的request方法,這樣所有的api就封裝成一個個函數(shù)。我們在頁面中直接import引入調(diào)用即可。

import request from "../utils/request";
import { stringify } from "../utils/util"

export function testPost(data) {
 return request(`/api/test/post`, {
 method: 'PUT',
 data,
 })
}

export function testGet(data) {
 return request(`/api/test/get`)
}

九、使用 npm (引入 weui、moment等插件)

因為小程序使用的是不完整的瀏覽器對象,所以很多js包都是不好使的,比如jquery之類的。所以npm基本是廢了,能用的依賴包很少,具體哪些能用得自己發(fā)掘了。這里還是要介紹一下小程序如何使用npm,畢竟有些包還是要用的。

1、打開 微信開發(fā)者工具 -- 點擊 詳情 -- 勾選 使用npm模塊

2、打開命令行,進入項目的根目錄下, npm init 初始化npm

3、npm i 。。。安裝你需要的依賴

4、打開 微信開發(fā)者工具 -- 點擊 工具 -- 點擊 構(gòu)建npm。 此時小程序會將 node_modules 文件編譯打包,生成新目錄 miniprogram_npm ,

5、在需要用到的頁面的js文件中,const moment= require('moment') 引入,直接使用即可

6、最后記得忽略文件。新建 .gitignore 文件,node_modules 、 package_lock.json 等文件不需要上傳,最好只保留小程序的npm構(gòu)建包,用什么依賴也是的那個下載。這個到不是必須的

ps: 特殊注意一下weui的引入,這個ui庫是純css的,沒有js文件,所以他沒法用npm引入,而是直接下載文件,我直接丟到根目錄下,然后在 app.wxss 文件的開頭引入

@import 'weui.wxss';,這樣使用的

十、封裝微信小程序可復(fù)用組件

現(xiàn)在篇幅有點太長了,這個另寫一篇,有需要的可以去看。

十一、總結(jié)

以上就是我開發(fā)小程序的一些經(jīng)驗和總結(jié),希望能幫到你。另外,整套程序的骨架(業(yè)務(wù)代碼刪掉了)我會上傳到github,下載 有需要的可以去下載,記得點個贊,哈哈。

最后,我會另寫一篇博客,寫一下 如何封裝小程序 組件,并附上 我開發(fā)小程序遇到的坑,以及對應(yīng)的解決方法。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法

    layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法

    今天小編就為大家分享一篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js判斷價格,必須為數(shù)字且不能為負數(shù)的實現(xiàn)方法

    js判斷價格,必須為數(shù)字且不能為負數(shù)的實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s判斷價格,必須為數(shù)字且不能為負數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • JavaScript ES5標準中新增的Array方法

    JavaScript ES5標準中新增的Array方法

    這篇文章主要介紹了JavaScript ES5標準中新增的Array方法 的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • 微信小程序入口場景的問題集合與相關(guān)解決方法

    微信小程序入口場景的問題集合與相關(guān)解決方法

    這篇文章主要介紹了微信小程序入口場景的問題集合與相關(guān)解決方法,從零開始開發(fā)一個小程序,大多數(shù)坑點都是在微信小程序的各個入口場景處。所以這里整理一下微信小程序的各個入口場景會面臨的問題以及解決方案,需要的朋友可以參考下
    2019-06-06
  • JavaScript腳本性能的優(yōu)化方法

    JavaScript腳本性能的優(yōu)化方法

    JavaScript是一種解釋型語言,所以能無法達到和C/Java之類的水平,限制了它能在客戶端所做的事情,為了能改進他的性能,我想基于我以前給JavaScript做過的很多測試來談?wù)勛约旱慕?jīng)驗,希望能幫助大家改進自己的JavaScript腳本性能。
    2007-02-02
  • 分享15個JavaScript的重要數(shù)組方法

    分享15個JavaScript的重要數(shù)組方法

    這篇文章主要介紹了分享15個JavaScript的重要數(shù)組方法,數(shù)組方法的重要一點是有些是可變的,有些是不可變的。在決定針對特定問題使用哪種方法時,務(wù)必牢記,下文就來分享重要數(shù)組方法,需要的小伙伴可以參考一下
    2022-05-05
  • JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實例【測試可用】

    JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實例【測試可用】

    這篇文章主要介紹了JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實現(xiàn)點擊圖片及點擊左右按鈕滑動切換的效果,涉及javascript針對鼠標事件的響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項

    layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項

    今天小編就為大家分享一篇layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲完整實例

    JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲完整實例

    飛機大戰(zhàn)坦克是一款小游戲,相信很多朋友都有玩過,由于最近在深入學習Javascript,所以想著用利用Javascript來實現(xiàn)這個游戲,下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲,需要的朋友可以參考下
    2017-01-01
  • JS訪問對象兩種方式區(qū)別解析

    JS訪問對象兩種方式區(qū)別解析

    這篇文章主要介紹了JS訪問對象兩種方式區(qū)別解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-08-08

最新評論