微信小程序 开发,uni-app 开发简介

Posted 2023-04-09 大树的Blog

微信小程序 开发相关知识点

1.如何创建小程序
微信开发者工具，appid,微信公众平台，创建小程序

2.小程序项目基本组成结构
app.js 小程序入口文件;app.json小程序配置文件；app.wxss全局样式文件；pages小程序页面

3.小程序页面构成部分
.wxml页面结构,.wxss页面样式.,.json页面配置文件,.js页面业务逻辑

4.小程序常见组件使用
view(div),text(span),image(img)

5.小程序协同开发，发布
成员管理，发布小程序，查看运营数据

6. wxml模板语法渲染页面结构
   wx:if;wx:elif;wx.else;hidden;wx:for;wx:key

7.WXSS样式美化页面结构
rpx尺寸单位；@import样式导入；全局样式和局部样式

8.app.json 对小程序进行全局配置
pages;window;tabBar;style

9.page.json对页面进行个性化配置
对单个页面个性化配置，就近原则

10. 如何发起网络数据请求
    wx.request();onLoad()

11. 视图和逻辑，页面之间的导航跳转
    声明式导航，编程式导航

12. 如何实现下拉刷新效果
    enbalePullDownRefresh,onPullDownRefresh

13.如何实现上拉刷新效果
onReachBottomDistance;onReachBottom

14.小程序中常用的生命周期函数
应用生命周期函数:onLaunch,onShow,onHide
页面生命周期函数：onlLoad,OnShow,onReady,onHide,OnUnload

组件的使用

15.创建引用组件
全局引用，局部引用，usingComponents

16.如何修改组件的样式隔离选项
options=>stylelsolation (isolated,apply-shared,shared)

17.如何定义和使用数据监听器
observers

18.如何定义和使用纯数据字段
optoins->pureDatePattern

19. 组件父子通信的3种方式
    属性绑定，事件绑定，this.selectComponent(\'id或class选择器‘）

20. 如何实现和使用behaviors
    调用behavior()构造器方法

21. 如何安装和配置vant-weapp组件库
    参考vant官方文档

22.如何使用mobx实现全局数据共享
安装包，创建store,参考vant官方文档

23.如何对小程序的api进行promise化
安装包，在app.js中进行配置

24. 如何实现自定义tabbar的效果
    vant 组件库+自定义组件+全局数据共享

https://www.escook.cn/docs-uni-shop

https://www.escook.cn/docs-uni-shop/mds/1.start.html#_1-1-uni-app-简介

uni-app 开发简介

1. 是基于vue.js语法的uni-app模板项目--》打包，编译，转换--》微信小程序项目，H5 WEB项目，android项目，ios项目
   hbuilderx app 开发板

https://ext.dcloud.net.cn/plugin?name=compile-node-sass 编译scss/sass为css。uni-app编译或对文件右键-外部命令编译时使用
.gitignore
/node_modules
/unpackage/disk

.gitkeep

2.把项目托管到码云：
1.注册并激活码云账号https://gitee.com/signup
2.生成并配置SSH公钥（运行ssh -t [e-mail] 检测ssh公钥是否配置成功
3.创建空白码云仓库
4.把本地项目上传到对应的空白仓库中

3.tabBar 开发

4.首页开发; 请求包安装配置，轮播图，详情页面分包，分类导航区域，

5.分类开发;

6.搜索开发;

7.商品列表开发;

8.购物车开发;

9.登录支付开发;

10.发布发;

uni-app 引用 微信小程序原生自定义组件

参考技术A 参考官方文档： https://uniapp.dcloud.io/frame?id=小程序自定义组件支持