小程序试水

HelloNerd
188 阅读3分钟

最近APP端的需求不多，公司安排我和一位前端工程师一起开始做小程序项目，在这记录下项目中碰到的问题。

入门的话感觉要掌握的技术点：

html + css + js , vue , 微信小程序, uni-app

一开始说要用原生的微信小程序做，后面又说要用uni-app 开发，没办法又看了uni-app, 其实前端像这样的框架还有 Taro，chameleon，都是可以一套代码，然后编译不同平台的小程序，甚至安卓和iOS 的APP。

小程序多端框架全面测评

  • 1, 资源文件

小程序因为大小限制，所以像图片文件和字体文件，都不是放在本地,我们是先上传七牛云，然后直接使用url。

<image src="https://oss.zhihanyun.com/lcb_mp_home_nav-down.png" class="nav-down"></image>

字体文件的话，先新建的index.scss 文件

@font-face {
	font-family: font-price;
	src: url('https://oss.zhihanyun.com/DIN%20Condensed%20Bold.ttf');
}

然后在 App.vue 中导入，就可以全局使用了

<style lang="scss">
	@import "./index.scss";
</style>
  • 2, 自定义组件

自定义组件主要就包括，UI 的绘制，和事件的传递了，UI绘制就要靠多些界面，事件传递包括，父组件向子组件传递数据，这个主要要使用到props 属性,组件的对外属性，是属性名到属性设置的映射表。

props:{
    imgUrls:{}
},

使用

<my-swiper :imgUrls="imgUrls"></my-swiper>

子组件向父组件传递数据，主要依靠事件传递,首先我们给父组件绑定事件 updateBtnClick

<my-popup ref="popup" @updateBtnBlick="updateBtnClick"></my-popup>

然后在子组件内调用

methods: {
    updateBtnClick() {
        this.$emit("updateBtnBlick");
        this.close();
    }
}
  • 3，动态修改css 样式 项目中碰到一个问题,iPhoneX 底部有小黑条，需要动态调整距离底部的距离可以通过 uni.createSelectorQuery().select() 函数动态操作DOM
uni.getSystemInfo({
    success: function(res) { // res - 各种参数
        let info = uni.createSelectorQuery().select(".top-navbar");
        info.boundingClientRect(function(data) {
        _this.popTop = data.height
					}).exec()
        let tab = uni.createSelectorQuery().select(".tab-bar");
        tab.boundingClientRect(function(data) {
        _this.login_bottom = data.height/2.0;
        }).exec()
	}
});

使用

<view :style="{'margin-bottom':login_bottom+'px'}"></view>
  • 4，全局的状态管理

因为用的是vue,所以状态管理肯定就是vuex，就像你React 和 Redux 的关系一样。

  • 5，感受

1，开发小程序的时候，感觉很多东西，微信都提供了，很方便。而且编译预览很快，如果js 和css 很熟练的话，写起来很快。而且微信开发者工具可以添加编译模式，指定启动页面，更方便调试指定页面了，以及调试器的NetWork,AppData,Storage,都是常用的选项.

  • 6, hiddren 属性

标签如果设置 display: flex, hiddren 会失效，通过控制display: none,或者外面再包一层，然后在使用wx:if 。

  • 7, scrollview 的坑

scrollview 需要指定高度才能滑动，在页面加载完，计算好scrollview 的高度，重新设置

juejin.cn/post/684490…

2，一开始我以为小程序速度比H5快，是因为和Weex 还有React-Native 的原理是一样的，底层都是调用原生控件，看了下面的文章我才知道不是，小程序是用webview 渲染的，逻辑层使用JSCore运行。视图层和逻辑层通过系统层的WeixinJsBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。这样的话就和我们常说的 Hybrid App 原理差不多了。

微信小程序原理

avatar
文章
阅读
粉丝