7
收藏
评论

两天快速开发一个自己的微信小程序!

为什么要学小程序开发?开发要准备什么?开发小程序难不难?!

你们要的前端、服务端、数据库一整套的小程序+公众号项目来了

附上几张效果图,代码传到码云了,喜欢的童鞋可以star,打赏、点赞、扔硬币、仍香蕉~

代码地址:https://github.crmeb.net/u/download

演示首页、商品详情页

-----------------------------正文从这里开始----------------------------

一.写在前面

1.为什么要学小程序开发?

对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。

2.开发准备:

(1)有人开玩笑说,会vue小程序根本都不用学:

微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的

(2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。

具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目

话不多少进入正题开干了

一.注册小程序账号,下载IDE

1.官网注册https://mp.weixin.qq.com/,并下载IDE。

2.官方文档一向都是最好的学习资料。

注意:

(1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。

(2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid。

二.小程序框架介绍和运行机制

1.我们建立了“普通快速启动模板”,然后整个项目目录如下:

2.app.js

整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。

globalData是定义整个项目的全局变量或者常量。

3.app.json

整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面标题等等;

!注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面。

4.pages

小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs

5.打开index目录

可以看到有三个文件,其实和我们web开发的文件是一一对应的。

index.wxml对应index.html;

index.wxss对应index.css;

index.js就是js文件。

一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能

6.双击index.js文件

(1)var app = getApp();

引入整个项目的app.js文件,用来取期中的公共变量等信息。

如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到。

(2)比如,我们要获取某站电影的时候,我们需要调用其api;我们先在app.js中的gloabData中定义doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到这个值。

当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中。

(3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react~

通过setData修改data数据,驱动页面渲染

(4)一些生命周期函数

比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等

更多的可以查官网API。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)

7 .wxml模板的使用。

比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。

star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

8.常用的wxml标签

view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

三.小程序框架、各个页面以及发布上线的注意点

1.整个框架中的一些注意点

(1)整个wxml页面,最底层的标签是<page></page>。

(2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置。

(3)json中不能写注释,不然会报错的。

(4)路由相关

1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效。

注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开。

2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册,不然同样也是不能跳转的。

3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候。

(5)页面之间传递参数

参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

(6)data-开头的自定义属性的使用

比如wxml中我们怎么写

点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

注意: 大写会转换成小写,带_符号会转成驼峰形式

(7)事件对象event,event.target和event.currentTarget的区别:

target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

(8)使用免费的网络接口:

本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档,很详细的

注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上

附上一个免费接口大全:

https://github.com/jokermonn/-Api

8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错。

把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的。

2.切换城市页面:

(1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。

正确的处理逻辑如下:

1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面。

2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。

3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的。

(2)城市列表的滚动和回到顶部

基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部

3.地图服务页面

(1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档

(2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态

然后wxml再根据数据来动态添加class,增加边框样式

4.更多页面

(1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的。

(2)彩蛋页面,获得用户信息

通过 wx.setStorageSync(‘userInfos’, userInfos); 可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析

我这里只是存储到浏览器缓存中,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

5.发布注意

(1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片

具体怎么把本地图片变成网络图片,上面有讲。

(2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块–开发版本就有了内容。

(3)点击提交,填写小程序相关信息,就可以提交审核了。

注意:分类最好填写准确,这样才能更快的通过审核。我这个小程序一天半时间过审上线的

至此,我就把两天开发内碰到的坑和注意点都过了一遍,据说还有更多的坑,等之后更深入的开发再继续研究咯。

-------------------------------------写在最后----------------------------------------

**本公司历时两年开发的一套小程序+公众号商城,现全开源无加密开放,只为方便更多从事小程序开发的伙伴。

项目地址:https://github.crmeb.net/u/download。

小程序页面展示

公众号页面展示

后台页面展示

**
喜欢的小伙伴记得点赞!**

项目地址:https://github.crmeb.net/u/download。

最后一次编辑于  03-06  (未经腾讯允许,不得转载)
复制链接赞 7收藏投诉评论

17 个评论

  • 哆啦A乐
    哆啦A乐
    03-07

    历时两年开发的公众号和小程序。。。。。。。。。。。。。。。。。。。。。。。两年啊 !大哥! 两年这么个项目?

    03-07
    赞同 2
    回复 1
    • 弱冠而立_
      弱冠而立_
      03-07

      敢问哪个公司会投入全部精力去开发一个项目?还要,你真的有下载体验搭建源码了?目前开源的源码,全开源,无加密,无域名限制,可二开、可商用!


      目前包含:限时秒杀、满减优惠券、签到积分、积分抵扣、分销管理(人人分销和指定人分销)、二级返佣、在线客服(可用模板消息推送指定人微信号,实线在线聊天)、产品多属性(自定义规格、价格、产品图)、订单提醒(推送至指定人微信新订单提醒)、财务统计(提现管理、充值记录、资金流水、佣金记录)、数据管理(产品数据统计、订单数据统计、会员分析、会员复购、标签、趋势图、排行榜等等)、文章管理(图文、音频、视频)、物流查询(直接对接阿里物流接口)、子账户管理(身份管理、权限设置、子账户)、组合数据(后台快速添加表单一键生成)、系统设置(刷新缓存、数据库备份、附件管理、文件验证)、一键安装(源码上传服务器后访问域名,只需三步安装完成。自动导入数据库等)等等等功能。


      系统包含公众号商城和小程序商城,后台发布一个产品公众号商城和小程序商城都有,配置下微信开放平台,用户无论在公众号还是小程序下单的,都能互相看的到。


      请问,这么一个系统,现在免费全开源源码给大家使用。


      你的这条评论,想表达什么?

      03-07
      1
      回复
  • Sailing
    Sailing
    03-07

    还是有用的 赞一个

    03-07
    赞同 2
    回复 1
    • 弱冠而立_
      弱冠而立_
      03-08

      加油!

      03-08
      回复
  • 陈式坚
    陈式坚
    03-06

    广告真的是越打越嚣张 不够套路摸得很透

    知道现在社区很多人喜欢看这种

    03-06
    赞同 1
    回复 3
    • 弱冠而立_
      弱冠而立_
      03-06

      这不是广告,这是心得分享,项目是我们公司自己开发的,都是免费开源的

      03-06
      1
      回复
    • 哆啦A乐
      哆啦A乐
      03-07

      冒昧问一下您公司开发多少人?

      03-07
      回复
    • 弱冠而立_
      弱冠而立_
      03-07回复哆啦A乐

      说别的怕被封,还是说技术相关吧。来这里是为了分享技术,分享心得,分享经验。我不知道说广告贴的是在指什么。都是全开源,不收一份一毛。有空了可以看下,觉得有用了可以学习提升技术,没用的那就不看,就这么简答。

      03-07
      回复
  • 河西~石头
    河西~石头
    03-07

    纯粹广告贴,坚定完毕!所谓分享的心得也是照抄了一下开发手册的第一个小程序!!!刚入门的童鞋自己看开发文档中的第一个小程序比这要清楚得多,免得被误导!

    03-07
    赞同
    回复 3
    • 弱冠而立_
      弱冠而立_
      03-07

      照抄?请你把你所谓的“开发手册的第一个小程序”发一下,看看是否一样。

      误导?请你指正我帖子中有哪些是在误导?


      是,承认是有宣传的成分,但也只是宣传我们公司自己开发的一套系统源码。全免费全开源完整帮助手册、开发文档,分享给大家使用。


      互联网的精神是共享分享,而不是去抨击。

      03-07
      回复
    • 河西~石头
      河西~石头
      03-07回复弱冠而立_

      分享的确须赞扬!标题误导太严重!内容却是入门前!

      03-07
      回复
    • 烬
      03-11回复河西~石头

      这种标题党,跟浏览器里面的文章一样,老让人误解。不知道是故意的,还是语文没学好

      03-11
      1
      回复
  • lekker
    lekker
    03-07

    先给开源的行为赞一个

    03-07
    赞同
    回复 2
    • 弱冠而立_
      弱冠而立_
      03-07

      谢谢支持,开源项目地址:https://github.crmeb.net/u/download

      不求别的,只点赞、关注就行。我们会继续努力下去的


      03-07
      回复
    • Zero
      Zero
      03-08回复弱冠而立_

      /u/download 这个ID注册的很赞

      03-08
      回复
  • 弱冠而立_
    弱冠而立_
    03-11

    知道论坛里的大佬很多,可是同样新手也很多。从新手到大佬都是一步步走过来的。

    帖子也是给新手看的,大佬们嘴下留情。

    03-11
    赞同
    回复
  • super
    super
    03-16

    关键是 看了你这个广告  也不会做啊 教程也不够详细。

    03-16
    赞同
    回复