微信小程序开发的入门基础知识点
一、小程序介紹_安裝_使用
介紹小程序:
2017年1月9日，張小龍，騰訊。
支付寶現(xiàn)在也推出了小程序
無(wú)需安裝，無(wú)需卸載，觸手可及，用完即走
小程序基于微信，微信基于騰訊，騰訊有龐大的用戶(hù)基數(shù)。
小程序的核心技術(shù)基于h5 ajax的web app
小程序的核心技術(shù)基于h5ajax的web app
開(kāi)始開(kāi)發(fā):
https://mp.weixin.qq.com
1、注冊(cè)賬號(hào)
2、登錄
3、添加開(kāi)發(fā)者
4、下載開(kāi)發(fā)工具
5、安裝
6、新建項(xiàng)目，填寫(xiě)APPID
7、學(xué)會(huì)查看開(kāi)發(fā)文檔
8、微信小程序的結(jié)構(gòu)
Index.js 腳本文件，負(fù)責(zé)加載數(shù)據(jù)，實(shí)現(xiàn)部分特效，里面有很多定義好的js方法和 結(jié)構(gòu)用來(lái)加載數(shù)據(jù)；
Index.json 配置文件，有很多關(guān)于頁(yè)面的配置；
Index.wxml 前端頁(yè)面，擁有獨(dú)立的標(biāo)簽系統(tǒng)，和HTML神似；
Index.wxss 樣式文件，和css一樣。
微信小程序的前端樣式，每個(gè)頁(yè)面至少三個(gè)文件維護(hù)Js,wxml,wxss，但是也有全局配置，開(kāi)發(fā)者可以根據(jù)開(kāi)發(fā)需通過(guò)修改配置要進(jìn)行樣式的修改。
9、app.json配置
注意json文件不可以添加注釋。
Window全局默認(rèn)窗口用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
配色網(wǎng)站：https://www.webdesignrankings.com/resources/lolcolors/
TabBar 底部導(dǎo)航欄
Color 文字顏色
backgroundColor 導(dǎo)航欄背景顏色
selectedColor 選擇后字體顏色
List 導(dǎo)航內(nèi)容列表，最少兩個(gè)，最多五個(gè)
Text 導(dǎo)航文本
pagePath 導(dǎo)航連接，必須是在page參數(shù)之內(nèi)的連接
iconPath 導(dǎo)航展示圖標(biāo)
selectedIconPath導(dǎo)航按下展示圖標(biāo)
10.app.js配置和app.json注釋
//app.js App({onLaunch: function () {// 展示本地存儲(chǔ)能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登錄wx.login({success: res => {// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId}})// 獲取用戶(hù)信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱(chēng)，不會(huì)彈框wx.getUserInfo({success: res => {// 可以將 res 發(fā)送給后臺(tái)解碼出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null,article_list:[{"picture":"/image/python1.jpg","title":"python3天成大神","description":"python是一個(gè)高層次的結(jié)合了解釋性、編譯性、互動(dòng)性和面向?qū)ο蟮哪_本語(yǔ)言。","time":"1997-11-06"},{"picture": "/image/python2.jpg","title": "python3周成大神","description": "python是一個(gè)高層次的結(jié)合了解釋性、編譯性、互動(dòng)性和面向?qū)ο蟮哪_本語(yǔ)言。","time": "1997-11-06"},{"picture": "/image/python3.jpg","title": "python3月成大神","description": "python是一個(gè)高層次的結(jié)合了解釋性、編譯性、互動(dòng)性和面向?qū)ο蟮哪_本語(yǔ)言。","time": "1997-11-06"},]} }) /*{//app()必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次.不然會(huì)出現(xiàn)無(wú)法預(yù)期的后果"pages": [//app是全局配置"pages/index/index","pages/logs/logs","pages/list/list"],"window": {//windows窗口"backgroundTextStyle": "light",//下拉loading的樣式，僅支持dark深色的，黑暗的/light光亮的"navigationBarBackgroundColor": "#000",//導(dǎo)航欄背景顏色；navigation導(dǎo)航"navigationBarTitleText": "天主極樂(lè)大帝",//導(dǎo)航欄標(biāo)題文件內(nèi)容"navigationBarTextStyle": "white"//導(dǎo)航欄標(biāo)題顏色},"tabBar":{//tabBar組件，類(lèi)似下圖的效果//頁(yè)面底部"color":"#666666","backgroundColor":"#000000",//底部背景顏色"selectedColor":"#E53A40",//被選中后的字體顏色"list":[{"text":"首頁(yè)","pagePath":"pages/index/index","iconPath":"/image/persion_select.png","selectedIconPath":"/image/persion.png"//被選中后的圖片},{"text": "列表頁(yè)","pagePath": "pages/list/list","iconPath": "/image/persion_select.png","selectedIconPath": "/image/persion.png"},{"text": "日志","pagePath": "pages/logs/logs","iconPath": "/image/persion_select.png","selectedIconPath": "/image/persion.png"}]},"sitemapLocation": "sitemap.json" }//sitemap網(wǎng)站地圖，location位置*/11、index.wxml
Swiper輪播圖特效插件
1、必須有swiper-item作為子標(biāo)簽
2、Autoplay自動(dòng)播放，默認(rèn)為false
3、Interval 輪播圖切換時(shí)間，單位是毫秒
4、Vertical 垂直輪播上下而非左右，不寫(xiě)默認(rèn)是左右
5、Circular（循環(huán)的，間接的）以平緩的方式過(guò)渡
小程序組件
View類(lèi)似于html當(dāng)中的div
Flex-direction:row;當(dāng)前方法已經(jīng)失效，需要用display:flex;來(lái)替代實(shí)現(xiàn)橫向布局
Text文本類(lèi)似與span標(biāo)簽
Image圖片
Image是一個(gè)雙標(biāo)簽
navigator超鏈接
URL就是跳轉(zhuǎn)的路徑
Open_type打開(kāi)方式，默認(rèn)navigate#導(dǎo)航
我們常用switchTab切換頁(yè)面
reLaunch攜帶參數(shù)切換頁(yè)面
Url在指向的時(shí)候，就是從根目錄出發(fā)
Url在指向的時(shí)候，就是從根目錄出發(fā)
icon圖標(biāo)
在其他的web開(kāi)發(fā)過(guò)程當(dāng)中，大部分的框架提供了后端渲染模板的方法。在小程序當(dāng)中，不存在后端腳本，只能使用前后端分離技術(shù)。
在其他web開(kāi)發(fā)過(guò)程中，大部分的框架提供了后端渲染模板的方法。在小程序當(dāng)中，不存在后端腳本，只能使用前后端分離技術(shù)。
回憶之前的前后端分離技術(shù)：
在視圖當(dāng)中返回json數(shù)據(jù)，形成接口 restful
在前端部分使用ajax請(qǐng)求接口 ajax
將請(qǐng)求的數(shù)據(jù)渲染到前端頁(yè)面上 vue
12、index.js和index.wxss配置
//index.js //獲取應(yīng)用實(shí)例 const app = getApp()//實(shí)例化appPage({data: {//局部變量來(lái)源于，當(dāng)前頁(yè)面的js文件中的page變量中的data變量motto: '天主極樂(lè)大帝億歲',article_list:app.globalData.article_list},//得到app.js中的article_list數(shù)據(jù)//得到app.js中的article_list數(shù)據(jù)//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},//頁(yè)面加載完成$(function(){})onLoad: function () {//this.data.article=app.globalData.article_listif (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒(méi)有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} }) /**index.wxss**/ .{font-family: 微軟雅黑； } .banner {width: 100%;height: 100%; } .content{width: 100%;height: 100px;display: flex;margin-top: 5px;background: #EFFFE9;border-bottom: 2px #EFFFE9 solid; }.content_hover{background-color: #EFFFE9; }.pic_box {width:30%;height: 100%; }.pic_box image{width:100;height: 100%; }.content_box{width:70%;height:100px;text-align: left;background:#EFFFE9; }.time{text-align: right; }總結(jié)
以上是生活随笔為你收集整理的微信小程序开发的入门基础知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： from flask.ext.cache
- 下一篇： Django创建项目的命令