初試小刀自我簡歷小程序

>>>點擊獲取更多文章<<<

最近在作小程序，和域名更換，和新域名備案事情，甚是較忙，少寫了文章，今天嘗試寫一篇小白總結小程序的常見問題，剛接觸小程序不到2周，在業餘時間嘗試小刀小程序，在作這個簡歷以前，本身親身搜索了我的簡歷的小程序，都體驗過，大部分是良莠不齊，我這個算是比較用心的製做了，搜索出來的簡歷小程序要不就是其餘第三方支持自動生成的，或者是本身製做的，可是都是放置一個設計的圖，比較簡單，可是也不缺一些好的案例。

附上我的簡歷小程序圖，作得怎麼樣，你們能夠微信掃描體驗下，多指教下。

小程序開發資源彙總

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

小程序開發框架

在github裏面找了找，Wepy 和mpvue比較火，畢竟Wepy是騰訊官方的開源，故我選擇了Wepy。同時也選擇了weui庫，貌似zanui也不錯，你們能夠嘗試下。

幻燈片組件

看到別人的一些小程序幻燈片圖片轉轉轉，很酷，覺得是一些其餘框架帶來的，其實 官方自帶了視圖容器swiper，詳情點擊官方 https://developers.weixin.qq....。

下方的tabBar

剛開始作的時候，覺得這些都是必須寫成組件，封裝成UI輸出，其實原生小程序已經自帶了，不須要額外作，在app.json能夠設置，在wepy框架是 app.wpy裏面設置。

矢量圖標哪裏找

在這 http://www.iconfont.cn/ 能夠找到須要的icon。

界面樣式如何適應不一樣手機

畢竟是在微信內部小程序環境，如何適應不一樣手機是個問題，用rpx吧，這樣在不一樣的手機能夠實現自適應。因此若是你使用的模塊有pxh或者rem,換算方式爲：1px=2rpx，1rem=35rpx。

內嵌html頁面

當初在作的時候也想過相似問題，其實百度了下，得知了答案，只有公司類型帳號才能內置 網頁<web-view src="https://www.xxxxxxxxx.com/ind...; />，我的帳號類型不能夠喲！

在html5跳轉到小程序的一個頁面

<!-- 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>

實現錨點跳轉

下面是我用wepy實現的代碼(本身看重點)，其實就是用了官方視圖容器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:['廠家網','騰訊','滿天星','嵊燦','諾沃帝'],
            toView:''
        };

        components = {
            footer: Footer
        };

        methods = {

        };

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

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

設置COOKIE

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

轉發功能

我記得官方有接口，能夠設置展現轉發按鈕，或者你自身頁面的UI，均可以觸發轉發功能，懶得找出來了，有心的自行到官方一看接口很容易找打送。 more detail look this https://blog.csdn.net/rolan19...

設置啓動頁面

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

看②https://blog.csdn.net/u012987...

有趣功能接口

小程序之間互跳轉，撥打電話，震動電話，添加聯繫人，調整屏幕亮度，退出小程序，複製功能，轉發功能等原生功能，都是官方有接口的，都挺有意思，你們能夠進行體會。

預覽圖片

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

審覈上線提交

官方文章還有有必要讀下的 微信小程序平臺運營規範,微信小程序平臺常見拒絕情形

遺留問題和總結

在swiper裏面的圖片，圖片大小樣式，不要給固定值，給width:100%，和height:100%，要不會出如今不一樣手機設備不兼容，我自身測試過；還有個問題能夠分享，在工做經歷tab裏面， 頂部有個圖片已經相對定位放在頭部，而後我加了css3動畫文字，整個文字塊嘗試過絕對定位和相對定位進行偏移到圖片（圖片裏面的電腦屏幕上）上，自身在我安卓華爲手機是能夠看到動畫效果的，可是在IOS手機，就是不出現，只好無奈，從新P下圖片，把文字P上去； 在基本信息tab裏面，有個「退出小程序」按鈕功能，在IOS上，反應不是很靈敏，感受功能不行，不知道其餘開發者會不會遇到這樣的問題，安卓上是能夠的。