一、小程序介紹_安裝_使用
介紹小程序:
2017年1月9日，張小龍，騰訊。
支付寶現在也推出了小程序
無需安裝，無需卸載，觸手可及，用完即走
小程序基于微信，微信基于騰訊，騰訊有龐大的用戶基數。
小程序的核心技術基于h5 ajax的web app
小程序的核心技術基于h5ajax的web app
開始開發:
https://mp.weixin.qq.com
1、注冊賬號


2、登錄


3、添加開發者



4、下載開發工具

5、安裝
6、新建項目，填寫APPID

7、學會查看開發文檔

8、微信小程序的結構

Index.js 腳本文件，負責加載數據，實現部分特效，里面有很多定義好的js方法和 結構用來加載數據；
Index.json 配置文件，有很多關于頁面的配置；
Index.wxml 前端頁面，擁有獨立的標簽系統，和HTML神似；
Index.wxss 樣式文件，和css一樣。

微信小程序的前端樣式，每個頁面至少三個文件維護Js,wxml,wxss，但是也有全局配置，開發者可以根據開發需通過修改配置要進行樣式的修改。

9、app.json配置
注意json文件不可以添加注釋。
Window全局默認窗口用于設置小程序的狀態欄、導航條、標題、窗口背景色。
配色網站：https://www.webdesignrankings.com/resources/lolcolors/
TabBar 底部導航欄
Color 文字顏色
backgroundColor 導航欄背景顏色
selectedColor 選擇后字體顏色
List 導航內容列表，最少兩個，最多五個
Text 導航文本
pagePath 導航連接，必須是在page參數之內的連接
iconPath 導航展示圖標
selectedIconPath導航按下展示圖標

{"pages": ["pages/index/index","pages/logs/logs","pages/list/list"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#000","navigationBarTitleText": "天主極樂大帝","navigationBarTextStyle": "white"},"tabBar":{"color":"#000000","backgroundColor":"#00ff00","selectedColor":"green","list":[{"text":"首頁","pagePath":"pages/index/index","iconPath":"/image/persion_select.png","selectedIconPath":"/image/persion.png"},{"text": "列表頁","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" }

10.app.js配置和app.json注釋

//app.js App({onLaunch: function () {// 展示本地存儲能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登錄wx.login({success: res => {// 發送 res.code 到后臺換取 openId, sessionKey, unionId}})// 獲取用戶信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框wx.getUserInfo({success: res => {// 可以將 res 發送給后臺解碼出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null,article_list:[{"picture":"/image/python1.jpg","title":"python3天成大神","description":"python是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。","time":"1997-11-06"},{"picture": "/image/python2.jpg","title": "python3周成大神","description": "python是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。","time": "1997-11-06"},{"picture": "/image/python3.jpg","title": "python3月成大神","description": "python是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。","time": "1997-11-06"},]} }) /*{//app()必須在app.js中調用，必須調用且只能調用一次.不然會出現無法預期的后果"pages": [//app是全局配置"pages/index/index","pages/logs/logs","pages/list/list"],"window": {//windows窗口"backgroundTextStyle": "light",//下拉loading的樣式，僅支持dark深色的，黑暗的/light光亮的"navigationBarBackgroundColor": "#000",//導航欄背景顏色；navigation導航"navigationBarTitleText": "天主極樂大帝",//導航欄標題文件內容"navigationBarTextStyle": "white"//導航欄標題顏色},"tabBar":{//tabBar組件，類似下圖的效果//頁面底部"color":"#666666","backgroundColor":"#000000",//底部背景顏色"selectedColor":"#E53A40",//被選中后的字體顏色"list":[{"text":"首頁","pagePath":"pages/index/index","iconPath":"/image/persion_select.png","selectedIconPath":"/image/persion.png"//被選中后的圖片},{"text": "列表頁","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網站地圖，location位置*/

11、index.wxml
Swiper輪播圖特效插件
1、必須有swiper-item作為子標簽
2、Autoplay自動播放，默認為false
3、Interval 輪播圖切換時間，單位是毫秒
4、Vertical 垂直輪播上下而非左右，不寫默認是左右
5、Circular（循環的，間接的）以平緩的方式過渡
小程序組件
View類似于html當中的div
Flex-direction:row;當前方法已經失效，需要用display:flex;來替代實現橫向布局
Text文本類似與span標簽
Image圖片
Image是一個雙標簽
navigator超鏈接
URL就是跳轉的路徑
Open_type打開方式，默認navigate#導航
我們常用switchTab切換頁面
reLaunch攜帶參數切換頁面
Url在指向的時候，就是從根目錄出發
Url在指向的時候，就是從根目錄出發
icon圖標

在其他的web開發過程當中，大部分的框架提供了后端渲染模板的方法。在小程序當中，不存在后端腳本，只能使用前后端分離技術。
在其他web開發過程中，大部分的框架提供了后端渲染模板的方法。在小程序當中，不存在后端腳本，只能使用前后端分離技術。

回憶之前的前后端分離技術：
在視圖當中返回json數據，形成接口 restful
在前端部分使用ajax請求接口 ajax
將請求的數據渲染到前端頁面上 vue

<!--index.wxml--> <view ><swiper class="banner_border" autoplay="true" interval="3000" circular="true"><!-- autoplay輪播圖播放，默認·是false interval輪播圖播放間隔（毫秒） vertical垂直的，circular以平緩的方式過渡（循環的間接的）--><swiper-item><image class="banner" src="/image/python1.jpg"></image></swiper-item><swiper-item><image class="banner" src="/image/python2.jpg"></image></swiper-item><swiper-item><image class="banner" src="/image/python3.jpg"></image></swiper-item><!-- 僅可以放置在swiper容器中寬高自動設置為100% --></swiper><!-- 滑塊視圖容器 --> </view> <view> <swiper class="banner_border" autoplay="true" interval="3000" circular="true" vertical="true"><!--autoplay輪播圖播放，默認是false interval 輪播圖播放間隔（毫秒） vertical垂直的circular 以平緩的方式過渡（循環的間接的） --><swiper-item><image class="banner" src="/image/python1.jpg"></image></swiper-item><swiper-item><image class="banner" src="/image/python2.jpg"></image></swiper-item><swiper-item><image class="banner" src="/image/python3.jpg"></image></swiper-item></swiper> </view> <view><view wx:for="{{article_list}}" wx:for-item="item" class="content" hover-class="content_hover"><!-- <view wx:for="{{article_list}}" wx:for-item="item"> --><!-- </view> wx:for循環一個列表；wx:for-item=列表中的每個元素 article_list是index.js中的數據--><!-- wx:for 循環一個列表；wx:for-item=列表中的每個元素 article_list是index.js中的數據 --><view class="pic_box"><image src="{{item.picture}}"></image></view><view class="content_box"><view><navigator class="title" open-type="reLaunch" url="pages/list/list?pages='{{index}}'">{{item.title}}</navigator><!-- {{index}}得到該元素在列表中的下標 reLaunch重新發射，重新調轉--><!-- open-type需要被指定為reLaunch只有這個方法才允許會允許攜帶get參數進行跳轉 open-type微信開放能力--></view><text class="description">{{item.description}}</text><view class="time">{{motto}}{{item.time}}</view></view></view> </view>

12、index.js和index.wxss配置

//index.js //獲取應用實例 const app = getApp()//實例化appPage({data: {//局部變量來源于，當前頁面的js文件中的page變量中的data變量motto: '天主極樂大帝億歲',article_list:app.globalData.article_list},//得到app.js中的article_list數據//得到app.js中的article_list數據//事件處理函數bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},//頁面加載完成$(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 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 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; }

總結

以上是生活随笔為你收集整理的微信小程序开发的入门基础知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。