小程序开发（1）-学习历程整理

港控/mmm° 2023-07-18 02:25 11阅读 0赞

整理一下最近两周学习小程序的开发历程，由于知识比较零碎，特此整理。

心路历程如下：

1.  判断是否需要一个小程序以及研究小程序和H5页面的区别（花费：1天）
2.  hello我的小程序（花费：1天）  
    学习如何应用小程序原生框架，搭建自己的第一套hello world。  
    对于没有用过vue或者类似框架的人来说，稍显有些吃力，但是并不难理解。  
    参考链接：https://www.jianshu.com/p/0ff8c3b2f59f
3.  使用vscode+npm+微信开发者工具搭建mpvue开发环境（研究后选择的正式开发环境）  
    过程有点曲折，不过幸好之前做ionic的时候用过类似的工具，参考了很多别人的博客，终于完成  
    参考链接如下：
    
    1.  安装node.js环境 。https://www.cnblogs.com/tielemao/p/9157675.html ；https://blog.csdn.net/qq\_39308408/article/details/97754889
    2.  搭建开发环境（此教程后续还有框架使用的demo，可以一并参考）。https://www.jianshu.com/p/6f8d74be3ff8
4.  运行过程中，由于开启了ESLint的校验，demo代码中常见错误整理如下：  
    Strings must use singlequote 必须使用单引号  
    Extra semicolon 多余的分号，https://www.cnblogs.com/cowboybusy/p/10633286.html  
    Missing space before function parentheses 方法名和括号之间必须有空格 https://www.jianshu.com/p/2f5cded8a2d3  
    Unexpected trailing comma 后面多了一个逗号  
    Infix operators must be spaced 操作符号，如+，-之类的，前后必须有空格

npm修改eslint规则

*  https://blog.csdn.net/qq15577969/article/details/89341735
 *  https://blog.csdn.net/weixin\_33915554/article/details/88848442?depth\_1-utm\_source=distribute.pc\_relevant.none-task&utm\_source=distribute.pc\_relevant.none-task

1.  其他遇到的小问题

static/van-web/area/index.js" is not defined https://segmentfault.com/a/1190000016228410

Page “pages/index/main” has not been registered yet.

1.  删除dist文件夹，然后重新npm run dev
2.  检查各个文件存放的位置，是否层级关系放错了  
    van-weapp的样式，和你使用的组件样式不匹配。 https://github.com/zxz-googleman/hello-mpvue-vantweapp/blob/master/src/pages/panel/index.vue  
    Elements in iteration expect to have ‘v-bind:key’ directives. https://blog.csdn.net/Hero\_rong/article/details/88776855

后面的章节中，将尝试做一个有列表，有详情，支持状态管理（vuex），支持网络通讯的demo代码。