vue 开发小程序

ゝ一纸荒年。 2022-05-22 03:44 136阅读 0赞

## 引言 ##

现在的前端有各种各样的新知识和新框架，小程序才出生几年，就已经火到这种程度了，所以作为前端学习者，这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序，能从中找到自己的不足之处。于是我便萌发了一个新想法，自己手撸一个拉勾小程序。刚开始的时候，起步是有点难的，不知道怎么把学的东西转化成自己想要写的东西，但谢了一点后，感觉有点入迷了，停不下来。希望我写的东西能够帮助社区的学习者，如果写的不好，也欢迎你指正。

## 开发工具与资源平台 ##

*  [微信web开发者工具][web]：用于敲网页代码，但是最主要用来进行手机效果预览。
 *  [ VsCode][VsCode]:主要用于布局排版，也是敲代码的主战场，真心觉得这个编辑器不错，快捷输入和排版，大大提高了开发效率，使用简单，一学就会。
 *  [Iconfont-阿里巴巴矢量图标库][Iconfont-]：提供项目中的所有图标，资源丰富。
 *  [微信小程序开发者文档][Link 1]:微信小程序开发的文档，资源库，以及API规范
 *  [Easy Mock][]: 可以模拟我们想要的数据，非常方便。这里是部分数据

[预览图片][Link 2]

## 功能展示 ##

### 数据请求 ###

拉勾里面有非常多的数据，所以我在easy mock里面创建了很多接口，在页面需要用到的时候去
    请求数据，如果每一次都要用wx.request，而且到处都是异步请求，处理时会遇到很多的麻烦，
    es6中的promise可以将异步变成同步(vue中的async和await也可以)，封装一个request在以后
    的开发中也用得到的

封装的request

function request(params) {
      return new Promise((resolve, reject) => {
        wx.request({
          url: params.url,
          method: params.method || 'get',
          data: params.data,
          header: {
            'content-type': 'application/json'
          },
          success: resolve,
          error: err => {
            console.log("请求出错:" + err.errMsg);
          }
        })
      })
    }
    
    
    export default request

》import request from '../../utils/request.js'
    需要请求数据引入request.js

### 查看页面详情 ###

查看页面详情就是讲你点击的那个id传过去，但是我在这里遇到了一个坑，我在寻找点击的那个id的详情时，发现我匹配不了我的数据，后来我一步一步打印找事哪一步有问题，发现我用easymock造的数据，传的id是个字符串而不是数字，所以我将传过来id转化成数字在去进行匹配，得到了想要点击的详情页。

![163ee12f533a5c1d_imageslim][]

getActive(id) {
        const url = 'https://www.easy-mock.com/mock/5b06da4872643c7a5c4edcd1/api/desc#!method=get';
        var params = {
          url: url,
          method: 'GET',
        };
        let position = [];
        let currentDesc = this.data.currentDesc;
        request(params).then(res => { //异步变同步
          position = res.data.data.position;
        }).then(() => {
          for (let i = 0; i < position.length; i++) {
            if (i === id) {
              let that = this;
              that.setData({
                currentDesc: position[i]
              })
              console.log(that.data.currentDesc)
            }
          }
        }
          );
      },
      onLoad: function (options) {
        let id = options.id - 0; //将id转化成number
        this.getActive(id); //请求数据匹配id
      },

### 搜索 ###

![163ee12f57907097_imageslim][]

因为是用markdown造的假数据，数据不是很多，而且这不是像有后端的那样，可以传给后端参数，让后端给你提供符合的数据，所以还是得要自己干。刚开始实现时，第一时间想到的是用indexOf()去判断，如果不含有我输入的字符串，就返回-1，通过这点去判断。写这个只要知道大概的想法，一般是不怎么会出错的。

onInput(e) {
        let value = e.detail.value;
        // console.log(value);
        const job = this.data.job;//匹配的数组
        var list = [];
        for(var i = 0; i < job.length; i++){
          if(job[i].indexOf(value)>-1){//不包含value就返回-1
            list.push(job[i]);
          }
        }
        this.setData({
          list: list,
          ['search.content']: value
        });
      },

我这一部分之前是有小bug的，页面从后一个页面回来时，搜索的记录会变成历史记录，同时搜索的值还会在input上，但是同样列表还显示在下面，这样就会造成用户体验及不良好，所以我给整个的搜索匹配到的列表一个三元运算符，点击跳转之前就会将其设为false，然后列表就会隐藏起来，从后一个页面返回时也不会出现那种状况。

positionSearch(e) {
        // console.log(e)
        let list = this.data.list
        let index = e.currentTarget.dataset.index;
        let value = list[index];
        let history = this.data.history;
        history.push(value); //将搜索的记录放入到历史搜索中
        this.setData({
          ['search.content']: value,
          history,
          isShowLists: true // 将lists隐藏
        })
        wx.navigateTo({
          url: `../related/related?value=${value}`,
        })
      },

### scroll-view会碰到的问题 ###

*  请勿在scroll-view之中使用 textarea、map、canvas、video
 *  scroll-into-view的优先级高于scroll-view
 *  scroll-view需要给scroll-view一个固定的宽度或高度，设置属性scroll-x或scroll-y,并且设置样式white-space:nowrap;（这个很重要，不设置这个样式，无法完成scroll-view的效果
 *  如果要下拉刷新时，请使用scroll-view组件[自带的方法][Link 3]，在scroll-view中滚动是不会触发onPullDownRefresh事件的

### 页面返回传值 ###

跳转页面的时候，可以通过navigateTo将要传递参数放在url上，但是返回原页面时，就得换过一种传参方法。一种是在app.js中设置golbaldata，然后在你想要传值的地方去设置golbaldata就可以了，或者你将数据储存在stroage里面。还有一种就是 getCurrentPages() ，getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

*  不要尝试修改页面栈，会导致路由以及页面状态错误。![163ee12f5ea8ddab_imageslim][]

changecity(e) {
        var value = e.target.dataset.value;
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];  //当前页面
        var prevPage = pages[pages.length - 2]; //上一个页面
        prePage.setData({
          location: value,
          city: value
        });
        wx.navigateBack({
          delta: 1
        })
      },

### 编辑简历 ###

![163ee12f6ce8108e_imageslim][]

![163ee12f59ad634b_imageslim][]

用[weui][]去写微信小程序去写节省我们一部分的时间。这个功能这里也有一个需要将值传回来的，我在这里是将参数传入stroage里面，因为我想换一种方式去实现。在个人信息中，有一个表单验证，在这里，我除了一个大亏。先贴代码，看看我写的表单验。(下门只是部分代码，想要看完整代码可以看这里[我的项目][Link 4])

<view class="container">
     
            <view class="weui-cells weui-cells_after-title name">
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">真实姓名</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input name-input" type="text" value="{ {val}}" bindinput="nameChange" placeholder="请输入" />
                    </view>
                </view>
            </view>
            ......//代码太长，只粘贴部分代码
            <view class="weui-cells weui-cells_after-title name">
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">手机号码</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input name-input" type="number" value="{ {val}}" bindinput="telChange" placeholder="请输入" />
                    </view>
                </view>
            </view>
            <view class="bgft">
                <view class="introduction">
                    <view class="intro">
                        <text>一句话介绍自己</text>
                        <view class="wordNum">{
         {num}}/60</view>
                    </view>
                    <view>
                        <textarea placeholder="说出你的心声" value="{ {value}}" maxlength="60" class="input" bindinput="inputChange" />
                    </view>
                </view>
                <button class="btnEdit"  bindtap="formSubmit">保存</button>
            </view>
    </view>

formSubmit(e) {
        
    
        //验证是否输入名字
        let nameVal = this.data.nameVal;
        if (!this.errorInput(nameVal, '请输入你的名字')) {
          return false;
        };
       
        console.log(experience)
        let tel = this.data.telVal;
        if (!this.errorInput(tel, '请输入手机号码')) {
          return false;
        }
        if (!/1[3456789][0-9]{9}/.test(tel.trim())) {
          wx.showModal({
            title: '系统提示',
            content: '手机号码格式有误',
            showCancel: false,
            duration: 1500,
            success: () => { }
          })
          return;
        }
    
        wx.setStorage({
          key: "personal",
          data: [{ name: nameVal },
            { sex: sex},
            { date: date }, 
            { education: education},
            { experience: experience},
             { tel: tel }, 
             { mail: mail }, 
             { inputVal: inputVal },
             ],
          success: function () {
            wx.showToast({
              title: "保存成功",
              icon: 'success',
              duration: 2000
            })
            setTimeout( function(){
              wx.navigateTo({
                url: "../resume/resume"
              })
            }, 1000);
    
          }
        })
      },
      //下面是验证表单 封装的两个函数
      errorInput(val, errorMsg) {//是否输入
        if (val.trim() === '') {
          // console.log(errorMsg);
          wx.showModal({
            title: '系统提示',
            content: errorMsg,
            showCancel: false,
            duration: 1500,
            success: () => {
            }
          })
          return false;
        } else {
          return true;
        }
      },
      error(isShow, errorMsg) {//是否选择
        if (!isShow) {
          wx.showModal({
            title: '系统提示',
            content: errorMsg,
            showCancel: false,
            duration: 1500,
            success: () => { }
          })
          return false;
        } else {
          return true;
        }
    
      },

我写了两个函数去判断需要输入和需要选择的操作有没有完成(errorInput,error)，如果没有完成，就返回errorMsg，但是我这两个函数是返回false的，我当初在写的时候，没有在意，就一直卡住了，后来才发现我函数执行的返回值是false，执行这两个函数d的地方应该再对返回的值做判断。当然也可以使用其他方法去验证表单，比如[中介者模式][Link 5]

功能还有一部分没有写出来，还有一部分没有做出来，如果我的描述中有什么错误的话，欢迎指正，我们这群程序猿就是在bug中提升自己的。如果你想对我的项目想要了解更多， 可以查看[我的项目][Link 4]

### 想说 ###

作者：1haixinzgf  
链接：https://juejin.im/post/5b1e3a1f5188257d4e5f2bba  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[web]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fdevtools%2Fdownload.html%3Ft%3D201822
[VsCode]: https://link.juejin.im?target=https%3A%2F%2Fcode.visualstudio.com%2FDownload
[Iconfont-]: https://link.juejin.im?target=http%3A%2F%2Ficonfont.cn%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2F
[Easy Mock]: https://link.juejin.im?target=https%3A%2F%2Fwww.easy-mock.com%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F1haixinzgf%2Fwxapp-image%2Ftree%2Fmaster%2Fimages
[163ee12f533a5c1d_imageslim]: https://user-gold-cdn.xitu.io/2018/6/11/163ee12f533a5c1d?imageslim
[163ee12f57907097_imageslim]: https://user-gold-cdn.xitu.io/2018/6/11/163ee12f57907097?imageslim
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2Fscroll-view.html
[163ee12f5ea8ddab_imageslim]: https://user-gold-cdn.xitu.io/2018/6/11/163ee12f5ea8ddab?imageslim
[163ee12f6ce8108e_imageslim]: https://user-gold-cdn.xitu.io/2018/6/11/163ee12f6ce8108e?imageslim
[163ee12f59ad634b_imageslim]: https://user-gold-cdn.xitu.io/2018/6/11/163ee12f59ad634b?imageslim
[weui]: https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2018%2F6%2F5%2F163cf58028416bd8
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F1haixinzgf%2FLaGou
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F1haixinzgf%2Fwxapp-image