微信小程序开发-入门到熟练（wepy-初级篇）

2023-09-06 16:22:09

Title：最近做完了项目，review代码的同时，就想写一篇详细的小程序开发经历，记录自己的项目从0到1的过程

Desc : 小程序从0到1，从小白到完成项目，你需要这样做：

step1: 基础知识准备

　　知识储备： html5， CSS3， js(ES6), 组件化思维

　　wepy： https://tencent.github.io/wepy/document.html#/

　　Vue： https://cn.vuejs.org/

　　js-阮一峰： http://javascript.ruanyifeng.com/

　　js-git-廖雪峰： https://www.liaoxuefeng.com/

　　ES6-阮一峰： http://es6.ruanyifeng.com/

　　小程序文档： https://developers.weixin.qq.com/doc/

　　Vscode快捷键： https://www.cnblogs.com/fanghl/p/11269644.html

　　前端框架太多了，多到每个公司使用的技术栈都可能和你掌握的不一样，但是别怕，万变不离其宗，走到天涯海角也是 html5， CSS3，js ，组件化这四部分构成，之所以框架很多，是因为每个公司的业务需求不一致。Vue、react、angular三大框架，其中又衍生了根据这三种框架来的小框架，这里主要讲Vue，微信小程序开发可以使用官方提供的原生wxml、wxss、wxs，嗯，和html，css， js对比一下，换了个名称而已（自带狗头滑稽），也可以使用Vue思想的框架wepy,wepy完全继承了Vue的写法，只要熟悉Vue，wepy上手很快的。

step2:梳理项目

　　前端项目，移动端为主，主要涉及三个方面：UI、前端逻辑、数据三部分，UI产品经理会给你设计流程稿，美工会给你需要的样式素材、后端会给你返回数据。我们只需要搭出页面，运用数据，以前jquery时代，要操作DOM树来改变页面的显示，DOM如下图：

说白了，DOM树就是HTML标签的关系！！写HTML的时候，标签之间总要嵌套吧，最外层是，一个页面的其他标签都在中包裹着，对吧？有包裹着的关系，也有并列关系，基于这两种关系，换成专业术语，就是父子、兄弟关系，用树结构描述出来就是DOM的树结构，简称DOM树，在DOM树里面，我们可以通过标签（HTML元素）的class类名或者 ID 找到这个标签，

/**
*获取标签
*/
let div1 = document.getElementById('idName')    //原生
let div2 = $('idName')                          //jquery
function $(id) {                                //jq的$选择器简易源码原理return document.getElementById('id')      
} 
//获取到目标之后，可以对目标做操作，包括但不限于改变目标的文字内容、背景颜色、插入子元素、插入子模板，隐藏、显示、添加点击事件或其他事件等等，

之所以用树结构来描述，就是因为这样一目了然，关系很明确。而且还可以通过一个标签，找到他的子元素，父元素、兄弟元素、祖宗元素，进而对它们进行操作,例如：

let getFirstChild = document.getElementById("test").children[0];
let p = document.getElementById("test").parentNode;
let brother5 = document.getElementById("test").nextSibling;

以上是原生和jq的操作DOM树模式，这种方式现在已经不常用，但需要了解一下，现在常用的框架，几乎都是组件式开发，数据驱动、已经不操作DOM树了！！！！！

进入数据驱动模式：：

开发一个项目，产品会上说明开发需求，在把pr(设计需求文件)发给前后端和美工，三方开发开发，也就是说前端在没和后端对接口之前，都需要使用模拟数据，那么，一个普通项目可能会包含什么？事件、内容填充、页面跳转。就这三部分！！！

事件： wepy和Vue中，绑定事件用 v-on 简写 @tap = ‘eventName’ 原生和jq中用 οnclick=eventName()" 大同小异

内容填充：即用后端返回来的数据，把他们放到页面中去，

js代码如下：

 // 获取名片信息
    getCardInfo( user_id ) {const that = thiscircleApi.getCardInfo({data: {user_id,card_is_mine: -1            //默认-1 ====》圈内
            },getToken: true}).then( res => {log('获取我的名片信息', res)let data = res.datathat.cardInfo = data that.$apply()})}

html标签代码：（这个view是在

微信小程序开发-入门到熟练（wepy-初级篇）

相关文章