小程序知識總結-分享

1. 小程序介紹

   相對於其餘而言，有更好的體驗，便於微信規範管理，

   無需安裝，用完即走，觸手可及

   和移動應用相比，不佔內存且容易傳播，

   移動應用能作的，小程序基本也能夠作到

---------------------------------------------------------

2. 開發前準備

 01.註冊帳號

   點擊https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　02. 安裝開發工具

      連接 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 

---------------------------------------------------------------------------------------------------------------------------

3. 我的對小程序的見解

  相對於前端經常使用的html,css,js來講，小程序是 微信 對前端三劍客的 又一次封裝；

  html  變成  wxml ;

  css  --->   wxss;

  js  --->    仍是js,可是稍微有些不一樣

------------------------------------------------------------------------------------------------------------------------------

4. 微信原生小程序開發 代碼結構

config ----> 存放一些基本的 配置信息（我的喜愛） ，好比請求地址 等等；

pages ----> 項目中全部的界面

utils   ---->  工具函數，通常是由開發者本身實現，用於代碼複用

app.js --->   至關於入口文件，註冊整個應用

app.json ----> 全局配置

app.wxss  ----> 全局樣式

---------------------------------------------------------------------------------------

5. 經常使用配置介紹

 

 1 {
 2     "pages": [ //頁面路由
 3         "pages/books/books",
 4         "pages/my/my",
 5         "pages/myBooks/myBooks",
 6         "pages/detail/detail",
 7         "pages/comment/comment"
 8     ],
 9     "window": { // 外觀
10         "backgroundTextStyle": "light",
11         "navigationBarBackgroundColor": "#f2f2f2",
12         "navigationBarTitleText": "WeChat",
13         "navigationBarTextStyle": "black",
14         "enablePullDownRefresh": false
15     },
16     "tabBar": { // 底部導航欄
17         "list": [{
18             "pagePath": "pages/books/books",
19             "text": "書架",
20             "iconPath": "images/book.png",
21             "selectedIconPath": "images/bookSelected.png"
22         }, {
23             "pagePath": "pages/my/my",
24             "text": "個人",
25             "iconPath": "images/my.png",
26             "selectedIconPath": "images/mySelected.png"
27         }],
28         "color": "#bfbfbf",
29         "selectedColor": "#1AAD19"
30     },
31     "networkTimeout": { // 網絡超時
32         "request": 3000
33     }
34 }

View Code

6. 原生開發框架也是框架，和vue 同樣的套路

   ***沒有dom操做，只用關心數據的變化***

　***數據綁定---> 插值語法 {{}}***

   ***事件綁定 ---> bindTap || bind:touch  等等 ***

   

1 <view class="book-info">
2                              <text class="book-name">{{item.book_name}}</text>
3                              <text class="author">{{item.author}}</text>
4                              <text class="publisher">{{item.book_publisher}}</text>
5                          </view>

View Code

--------------------------------------------------------------------- 

7. 對css作了擴展，增長了rpx單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。

如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，

1rpx = 0.5px = 1物理像素

---------------------------------------------------------------------

8. 生命週期

 應用程序生命週期 

App({
//監聽小程序初始化    小程序初始化完成時（全局只觸發一次
  onLaunch: function () {
       
    },
//監聽小程序 小程序啓動，或從後臺進入前臺顯示時
onShow:function(){
} ,
//監聽小程序隱藏    小程序從前臺進入後臺時
onHide:function(){
},
//小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息
onError:function(){

}
// 小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數
onPageNotFound:function(){
}



})

頁面生命週期

// pages/books/books.js

const app = getApp();
const api = require('../../config/config.js');


Page({

    /**
     * 頁面的初始數據
     */
    data: {
        bookList: [],
        indicatorDots: false,
        autoplay: false,
        interval: 5000,
        duration: 1000,
        circular: true,
        sideMargin: '100rpx',
        showLoading: true
    },

    /**
     * 打開書籍詳情頁面
     */
    goDetail: function(ev) {

        let info = ev.currentTarget.dataset;
        let navigateUrl = '../detail/detail?';

        for (let key in info) {
            info[key] = encodeURIComponent(info[key]);
            navigateUrl += key + '=' + info[key] + '&';
        }

        navigateUrl = navigateUrl.substring(0, navigateUrl.length - 1);

        wx.navigateTo({
            url: navigateUrl
        });
    },

    /**
     * 獲取全部書籍列表
     */
    getBookList: function() {
        let that = this;
        wx.request({
            url: api.getBooksUrl,
            data: {
                is_all: 1
            },
            success: function(res) {
                let data = res.data;
                // console.log(data);

                if (data.result === 0) {
                    setTimeout(function() {
                        that.setData({
                            bookList: data.data,
                            showLoading: false
                        });
                    }, 800);
                }

            },
            error: function(err) {
                console.log(err);
            }
        });
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function(options) {
        let that = this;
        that.getBookList();
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function() {

    },

    /**
     * 設置頁面轉發信息
     */
    onShareAppMessage: function(res) {
        if (res.from === 'button') {
            // 來自頁面內轉發按鈕
            console.log(res.target)
        }
        return {
            title: '小書架首頁',
            path: '/pages/books/books',
            imageUrl: '/images/bookstore.png',
            success: function (res) {
                // 轉發成功
            },
            fail: function (res) {
                // 轉發失敗
            }
        }
    }
});