最近在做小程序，和域名更換，和新域名備案事情，甚是較忙，少寫了文章，今天嘗試寫一篇小白總結(jié)小程序的常見(jiàn)問(wèn)題，剛接觸小程序不到2周，在業(yè)余時(shí)間嘗試小刀小程序，多有不足，請(qǐng)指出。

附上個(gè)人簡(jiǎn)歷小程序圖，大家可以微信掃描體驗(yàn)喲。

 

 

小程序開發(fā)資源匯總

https://github.com/justjavac/...

小程序開發(fā)框架

在github里面找了找，Wepy 和mpvue比較火，畢竟Wepy是騰訊官方的開源，故我選擇了Wepy。同時(shí)也選擇了weui庫(kù)，貌似zanui也不錯(cuò)，大家可以嘗試下。

幻燈片組件

看到別人的一些小程序幻燈片圖片轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)，很酷，以為是一些其他框架帶來(lái)的，其實(shí) 官方自帶了視圖容器swiper，詳情點(diǎn)擊官方 https://developers.weixin.qq....。

下方的tabBar

剛開始做的時(shí)候，以為這些都是必須寫成組件，封裝成UI輸出，其實(shí)原生小程序已經(jīng)自帶了，不需要額外做，在app.json可以設(shè)置，在wepy框架是 app.wpy里面設(shè)置。

矢量圖標(biāo)哪里找

在這 http://www.iconfont.cn/ 可以找到需要的icon。

界面樣式如何適應(yīng)不同手機(jī)

畢竟是在微信內(nèi)部小程序環(huán)境，如何適應(yīng)不同手機(jī)是個(gè)問(wèn)題，用rpx吧，這樣在不同的手機(jī)可以實(shí)現(xiàn)自適應(yīng)。所以如果你使用的模塊有pxh或者rem,換算方式為：1px=2rpx，1rem=35rpx。

內(nèi)嵌html頁(yè)面

當(dāng)初在做的時(shí)候也想過(guò)類似問(wèn)題，其實(shí)百度了下，得知了答案，只有公司類型賬號(hào)才能內(nèi)置 網(wǎng)頁(yè)<web-view src="https://www.xxxxxxxxx.com/ind...; />，個(gè)人賬號(hào)類型不可以喲！

在html5跳轉(zhuǎn)到小程序的一個(gè)頁(yè)面

<!-- html代碼中引入JS SDK --> 
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> 
<script> 
 wx.miniProgram.navigateTo({url: '/path/to/page'}) 
</script>

實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)

下面是我用wepy實(shí)現(xiàn)的代碼(自己看重點(diǎn))，其實(shí)就是用了官方視圖容器scroll-view：

<template>

    <scroll-view scroll-y="true"  scroll-into-view="{{toView}}" scroll-with-animation="true"  class="out_scroll_view">
        <view id="list0"> </view>
        <view id="list1"> </view>
        <view id="list2"> </view>
        <view id="list3"> </view>
        <view id="list4"> </view>
        <footer></footer>
    </scroll-view>      

    <view class='right_nav'>
        <view class='nav_item' wx:for="{{rightNav}}" @tap="jumpTo(list{{index}})">
         <text class='item_name'>{{item}}</text>
        </view>
    </view>

</template>


<script>
    import wepy from 'wepy';
    import Footer from './common/footer';


    export default class Panel extends wepy.page {

        data = {
            rightNav:['廠家網(wǎng)','騰訊','滿天星','嵊燦','諾沃帝'],
            toView:''
        };

        components = {
            footer: Footer
        };

        methods = {

        };

        jumpTo(e){
            this.toView = e.currentTarget.dataset.wpyjumptoA;
        };    

        async onLoad () {
            wx.showShareMenu({
                withShareTicket: true
            });       
        };
    }
</script>

設(shè)置COOKIE

https://blog.csdn.net/DylanCa...

轉(zhuǎn)發(fā)功能

我記得官方有接口，可以設(shè)置展示轉(zhuǎn)發(fā)按鈕，或者你自身頁(yè)面的UI，都可以觸發(fā)轉(zhuǎn)發(fā)功能，懶得找出來(lái)了，有心的自行到官方一看接口很容易找打送。 more detail look this https://blog.csdn.net/rolan19...

設(shè)置啟動(dòng)頁(yè)面

看①https://blog.csdn.net/kerryqp...。

有趣功能接口

小程序之間互跳轉(zhuǎn)，撥打電話，震動(dòng)電話，添加聯(lián)系人，調(diào)整屏幕亮度，退出小程序，復(fù)制功能，轉(zhuǎn)發(fā)功能等原生功能，都是官方有接口的，都挺有意思，大家可以進(jìn)行體會(huì)。

預(yù)覽圖片

看https://blog.csdn.net/gao_xu_...，這功能是官方封裝好，挺實(shí)用。

審核上線提交

官方文章還有有必要讀下的 微信小程序平臺(tái)運(yùn)營(yíng)規(guī)范,微信小程序平臺(tái)常見(jiàn)拒絕情形

遺留問(wèn)題和總結(jié)

在swiper里面的圖片，圖片大小樣式，不要給固定值，給width:100%，和height:100%，要不會(huì)出現(xiàn)在不同手機(jī)設(shè)備不兼容，我自身測(cè)試過(guò)；還有個(gè)問(wèn)題可以分享，在工作經(jīng)歷tab里面， 頂部有個(gè)圖片已經(jīng)相對(duì)定位放在頭部，然后我加了css3動(dòng)畫文字，整個(gè)文字塊嘗試過(guò)絕對(duì)定位和相對(duì)定位進(jìn)行偏移到圖片（圖片里面的電腦屏幕上）上，自身在我安卓華為手機(jī)是可以看到動(dòng)畫效果的，但是在IOS手機(jī)，就是不出現(xiàn)，只好無(wú)奈，重新P下圖片，把文字P上去； 在基本信息tab里面，有個(gè)“退出小程序”按鈕功能，在IOS上，反應(yīng)不是很靈敏，感覺(jué)功能不行，不知道其他開發(fā)者會(huì)不會(huì)遇到這樣的問(wèn)題，安卓上是可以的。