小程序

git使用

廖雪峰的官網(wǎng)
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

克隆項(xiàng)目:git clone "目標(biāo)倉(cāng)庫(kù)"

1灯荧、創(chuàng)建版本庫(kù):cd到項(xiàng)目目錄下執(zhí)行 git init
2、查看一下狀態(tài):git status
3寺董、添加到版本庫(kù):git add .
4抄淑、提交說(shuō)明:git commit  -m "some message"
5、更新:git pull
6馋记、提交: git push
7号坡、撤銷修改:git checkout .
8、提交記錄:git log
9梯醒、版本回退: git reset --hard 3628164
10宽堆、回退到上一個(gè)版本:git reset --hard HEAD^
11、查看所有分支 git branch -a
12茸习、查看當(dāng)前所在分支 git branch
13畜隶、創(chuàng)建并切換分支 git checkout -b dev
14、合并分支 git checkout master       git merge dev
15逮光、刪除分支 git branch -d dev

flex布局

Flex 布局教程:語(yǔ)法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程:實(shí)例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

目錄結(jié)構(gòu)

文件結(jié)構(gòu)
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html

注冊(cè)頁(yè)面

注冊(cè)頁(yè)面
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

常用方法

data() 頁(yè)面的初始數(shù)據(jù)
onShow() 監(jiān)聽頁(yè)面顯示
setData() 參數(shù)格式接受一個(gè)對(duì)象代箭,以 key,value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value涕刚。

路由

頁(yè)面路由
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html
路由跳轉(zhuǎn)頁(yè)面
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html
 wx.navigateTo({
    url: '../identify/identify'
 })

事件處理函數(shù)

事件處理函數(shù)
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
點(diǎn)擊事件
bindtap()

傳參獲取跳轉(zhuǎn)

設(shè)置參數(shù)名data-title:
<view bindtap="toDetail" data-title="hello">

toDetail:function(e){
    var gettitle=e.currentTarget.dataset.title;(獲取傳過(guò)來(lái)的參數(shù))

    帶參數(shù)跳轉(zhuǎn):
     wx.navigateTo({
         url:"../detail/detail?title="+gettitle
     })
   }

獲取傳遞的參數(shù)

Page({
  data:{
    title:''
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    this.setData({
        title:options.title
    })
  },
})

點(diǎn)擊獲取分類信息切換背景

綁定切換id
<view class="classify-left-list {{touchId == item.id ? 'classify-touch' : ''}}" data-classifyId="{{item.id}}" bindtap="getClassList">

 // 獲取分類下的課程
  getClassList: function (event) {
    let that = this;
    var classId = event.currentTarget.dataset.classifyid;
    util.myrequest({course_class_id: classId},'/course/class/and/price/info','POST',function (res) {
      if(res.result) {
        that.setData({
          price: res.datas.price,
          course: res.datas.course,
          touchId: classId
        })
      }else{
        // console.log(res.result); 
      }
    })
  },

傳遞對(duì)象

傳遞:
var arr = {
            courseTitle: courseTitle,
            courseId: courseId
        };
        wx.navigateTo({
            url: "../detail/detail?title=" + JSON.stringify(arr)
        })

獲任俗邸:
onLoad: function(options) {
        let that = this;
        let str = JSON.parse(options.title);
        let courseId = str.courseId;
        this.getDetail(that, courseId);
        wx.setNavigationBarTitle({
            title: str.courseTitle
        })
    },

模塊化

模塊化
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html

(util文件)
1、定義方法
function firstLogin() {}
2杜漠、導(dǎo)出方法
module.exports = {
    firstlogin: firstLogin,
}
3极景、引入方法
var util = require('../../utils/util.js');
4、使用方法
 util.firstlogin();

請(qǐng)求接口

發(fā)起請(qǐng)求
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject
例子
wx.request({
  url: 'test.php', //僅為示例驾茴,并非真實(shí)的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
封裝方法
function myrequest(data, path, method, cb) {
    wx.request({
        url:  path,
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        data: data,
        method: method,
        success: function(res) {
            if (typeof cb == "function") {
                cb(res.data);
            }
        },

        // 登入失敗
        fail: function() {
            wx.showModal({
                title: '警告',
                content: '網(wǎng)絡(luò)異常盼樟!',
                success: function(res) {
                    if (res.confirm) {
                        // console.log('用戶點(diǎn)擊確定')
                    }
                }
            })
        },
    })
}
使用封裝的方法請(qǐng)求接口
util.myrequest('', '/home/title ', 'GET', function(res) {
            if (res.result) {
                e.setData({
                    title: res.datas
                })
            }
        })

動(dòng)態(tài)獲取圖片寬高適應(yīng)屏幕

// 設(shè)置輪播圖自適應(yīng)高度
function imageLoad(e, that, w) {
    wx.getSystemInfo({
        success: function(res) {
            var widths = res.windowWidth; //屏幕寬度
            let originalWidth = e.detail.width;
            let originalHeight = e.detail.height;
            var lunboimg = widths * w / 2.35
            that.setData({
                lunboimg: lunboimg
            })
        }
    })
}

// 精品課程寬高比16:9
function autoheight(e, that, x, y, z) {
    //獲取圖片的原始寬度和高度  
    wx.getSystemInfo({
        success: function(res) {
            var autowidth = res.windowWidth; //屏幕寬度
            var swiperHeight = (x * autowidth * y) / z
            that.setData({
                imgheight: swiperHeight
            })
        }
    })
}
.js文件中使用方法

    // 輪播圖2.35:1
    getImgHeight: function(e) {
        var that = this;
        util.imgauto(e, that, 1)
    },
    // 獲取輪播圖
    getLunbo: function(e) {
        var that = this;
        util.myrequest('', '/carousel/info', 'GET', function(res) {
            if (res.result) {
                e.setData({
                    reImg: res.datas
                })
            }
        })
    },
![OL~MA2P9ZI2AO6(EJ(PON09.png](http://upload-images.jianshu.io/upload_images/2605497-8263d861a8b004de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.wxml中使用
<!-- 輪播圖 -->
<view style="height:{{lunboimg}}px!important;">
    <swiper indicator-dots="{{indicatorDots}}" style="height:{{lunboimg}}px!important;" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
        <block wx:for="{{reImg}}" wx:key="{{reImg}}">
            <swiper-item data-port="1" data-courseTitle="貝斯塔" data-courseId="{{item.url}}" bindtap="toDetails">
                <image bindload="getImgHeight" style="height:{{lunboimg}}px!important;" src="http://beisita.anasit.com:8888{{item.image}}" />
            </swiper-item>
        </block>
    </swiper>
</view>
<!-- 輪播圖結(jié)束 -->

判斷登陸

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject

// 第一次使用小程序調(diào)用登錄注冊(cè)信息
// 是否是第一次注冊(cè)
function firstLogin() {
    let that = this;
    wx.checkSession({
        success: function() {
            //session 未過(guò)期,并且在本生命周期一直有效
            wx.login({
                success: function(res) {
                    // console.log(res.code)
                    if (res.code) {
                        var code = res.code;
                        that.myrequest({ code: code }, '/user/come/again', 'POST', function(res) {
                            if (res.result) {
                                wx.setStorageSync('account', res.datas.account);
                                wx.setStorageSync('token', res.datas.token);
                            } else {
                                wx.navigateTo({
                                    url: '../identify/identify'
                                })

                            }
                        })
                    } else {
                        console.log('獲取用戶登錄態(tài)失斝庵痢晨缴!' + res.errMsg)
                    }
                }
            })
        },

        fail: function() {
            //登錄態(tài)過(guò)期
            wx.login({
                success: function(res) {
                    if (res.code) {
                        var code = res.code;
                        // console.log(code);
                        that.myrequest({ code: code }, '/user/come/again', 'POST', function(res) {
                            if (res.result) {

                            } else {
                                wx.navigateTo({
                                    url: '../identify/identify?code=' + code
                                })
                            }
                        })
                    } else {
                        console.log('獲取用戶登錄態(tài)失敗峡捡!' + res.errMsg)
                    }
                }
            })
        }
    })
}
// 檢查是否有token account
function checklogin() {
    console.log('token')
    var token = wx.getStorageSync('token');
    if (!token) {
        wx.navigateTo({
            url: '../identify/identify'
        })
    }
}

改名

上線前可以改兩次
上線后不可改名

結(jié)構(gòu)
下載
懶加載
封裝模塊化
路由
傳叁(多叁數(shù))
接收參數(shù)
數(shù)據(jù)處理(this.setData)
圖片寬高比
微信端和手機(jī)端綁定賬號(hào)數(shù)據(jù)打通
flex布局
image背景圖
margin->padding ios樣式錯(cuò)亂
absolute定位





最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末击碗,一起剝皮案震驚了整個(gè)濱河市筑悴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌稍途,老刑警劉巖阁吝,帶你破解...
    沈念sama閱讀 219,539評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異械拍,居然都是意外死亡突勇,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門坷虑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)甲馋,“玉大人,你說(shuō)我怎么就攤上這事迄损∷さ螅” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵海蔽,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我绑谣,道長(zhǎng)党窜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,963評(píng)論 1 295
  • 正文 為了忘掉前任借宵,我火速辦了婚禮幌衣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘壤玫。我一直安慰自己豁护,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評(píng)論 6 393
  • 文/花漫 我一把揭開白布欲间。 她就那樣靜靜地躺著楚里,像睡著了一般。 火紅的嫁衣襯著肌膚如雪猎贴。 梳的紋絲不亂的頭發(fā)上班缎,一...
    開封第一講書人閱讀 51,763評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音她渴,去河邊找鬼达址。 笑死,一個(gè)胖子當(dāng)著我的面吹牛趁耗,可吹牛的內(nèi)容都是我干的沉唠。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼苛败,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼满葛!你這毒婦竟也來(lái)了径簿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤纱扭,失蹤者是張志新(化名)和其女友劉穎牍帚,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乳蛾,經(jīng)...
    沈念sama閱讀 45,850評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡暗赶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了肃叶。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹂随。...
    茶點(diǎn)故事閱讀 40,144評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖因惭,靈堂內(nèi)的尸體忽然破棺而出岳锁,到底是詐尸還是另有隱情,我是刑警寧澤蹦魔,帶...
    沈念sama閱讀 35,823評(píng)論 5 346
  • 正文 年R本政府宣布激率,位于F島的核電站,受9級(jí)特大地震影響勿决,放射性物質(zhì)發(fā)生泄漏乒躺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評(píng)論 3 331
  • 文/蒙蒙 一低缩、第九天 我趴在偏房一處隱蔽的房頂上張望嘉冒。 院中可真熱鬧,春花似錦咆繁、人聲如沸讳推。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)银觅。三九已至,卻和暖如春坏为,著一層夾襖步出監(jiān)牢的瞬間设拟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工久脯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留纳胧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,415評(píng)論 3 373
  • 正文 我出身青樓帘撰,卻偏偏與公主長(zhǎng)得像跑慕,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容