为什么要学习小程序开发？开发需要准备什么？小程序开发难吗？！你要的前端、服务器端、数据库小程序+公众号项目都在这里。附上几张效果图。代码已上传到码云。可以star喜欢的童鞋，打赏，点赞，投币，Banana~代码地址：https://github.crmeb.net/u/demoDemo首页，产品详情页------------------------正文从这里开始----------------------------1.写在前面1.为什么要学习小程序开发？对于前端开发，微信小程序以其简单快速、开发成本低、用户流量巨大等特点，已经成为前端开发工程师的必备技能。2、开发准备：（1）有人开玩笑说根本不用学Vue小程序：微信小程序虽然是腾讯自己开发的，但核心思想和Vue等框架是一样的（2）善于收藏精品小组件：“我们不生产代码，我们只是代码的搬运工”，善于找到自己想要的组件，熟练优雅地组装成一个大项目，也是程序员的一项基本功。具体如何找到你想要的小程序的demo。文末会推荐小程序的资源。大佬们的项目很多，我们进入正题开始干活吧。注册小程序账号，下载IDE1。在官网https://mp.weixin.qq.com/注册，下载IDE。2.官方文档永远是最好的学习资料。注意：（1）注册账号后会有一个appid，新建项目时需要填写，否则很多功能将无法使用，比如不能预览，不能上传代码等。(2)如果你注册了微信公众号，一定要注意微信公众号和小程序是两个账号，两者的appid也不一样。小程序的appid必须用于小程序的开发。二、小程序框架介绍及运行机制1、我们建立了一个“通用快速启动模板”，然后整个项目目录如下：2.app.js整个项目的启动文件，比如onlaunch方法写在评论里，有三大功能，浏览器Cache，存储和获取数据；使用登录成功的回调；获取用户信息。globalData是定义整个项目的全局变量或常量。3.app.json整个项目的配置文件，比如注册页面，配置标签??页，设置整个项目的样式，页面标题等；！注意：小程序启动的默认第一页是app.json页面中的第一页。4.pagesapplet的页面组件，有几个page，会有几个子文件夹。比如快速入门模板有两个页面，index和logs5。打开index目录，可以看到里面有三个文件，和我们的web开发文件一一对应。index.wxml对应index.html；index.wxss对应index.css；index.js是js文件。一般我们会在每个页面组件中添加一个.json文件作为页面组件的配置文件，设置页面标题等功能。6、双击index.js文件(1)varapp=getApp();import整个项目的app.js文件，用于获取期间的公共变量等信息。如果要使用util.js工具库中的方法，在util.js中的module.exports中导出，然后在需要的页面中require即可获取。(2)比如我们要获取某部电影的时候，需要调用它的api；我们先在app.js中的gloabData中定义doubanBase，然后在index.js中使用app.globaData.doubanBase来获取这个值。当然你也可以在页面需要的时候对这些常量使用硬编码的值，但是为了整个项目的维护，还是建议把这样的常用参数写在配置文件中。(3)接下来在整个页面({})中，第一个data是这个页面组件的内部数据，会渲染到页面的wxml文件中，类似vue，react~通过setData修改data数据，驱动页面渲染（4）onload()、onready()、onshow()、onhide()等一些生命周期函数，监控页面加载、页面初始渲染、页面显示、页面隐藏等更多可以查看官网API。使用最多的是onload()方法和onShareAppMessage()方法（设置页面共享的信息）7.wxml模板的使用。比如本项目的电影页面，以wxml这个最小的星级评分组件为模板，从star到movie再到movie-list，逐一嵌套。name属性写在star-template.wxml页面；那么在导入的时候就可以通过name来获取了。可以三、小程序框架、各个页面和发布上线的注意点1、整个框架的一些注意点（1）整个wxml页面的底部标签是。(2)每个页面顶部导航栏的颜色和标题在本页面的json中配置。如果没有配置，则在app.json中进行总配置。(3)注释不能用json写，否则会报错。(4)路由相关1)如果使用wx.SwitchTab跳转到tab页，除了在app.json中注册pages页面外，还需要在tabBar中注册tab页才能生效。注意：最多有5个tabs，也就是说顶部或底部最多有5个菜单。其他页面只能通过其他路由方式打开。2）navigateTo是跳转到非标签页，如欢迎页、电影详情页、城市选择页；在app.json中注册后，不能在tabBar中注册，否则无法跳转。3）ReLaunch跳转，新打开的页面左上角没有返回按钮，这个项目只使用一次，切换城市的时候。(5)页面间传递参数在跳转的URL中写入参数，然后在onload方法中的参数传递选项中接收另一个页面。使用id(6)data-开头的自定义属性，传递获取如下。比如我们在wxml中怎么写clicked事件对象呢？varpostId=event.currentTarget.dataset.postid;注意：大写转小写，_符号转驼峰(7)事件对象event、event.target和event.currentTarget的区别：target是指当前点击的组件，currentTarget是指组件捕获事件。比如在轮播图片组件中，点击事件要绑定到swiper上，以监听是否有图片被点击。此时这里的target指的是图片（因为点击的是图片），currentTarget指的是swiper。（因为绑定点击事件是在swiper上）（8）使用免费网络接口：本项目使用了和风天气api、腾讯地图api、百度地图api、豆瓣电影api、聚合头条api等，具体用法可以看各自官网的接口文档都非常详细：免费接口有访问限制，所以如果你用这个接口和别人的组件，最好注册一个新的key，换成免费接口：https://github.com/jokermonn/...8)wxss有个坑：不能读取本地资源，比如本地使用背景图会报错。将本地图片转为在线图片有以下几种方式：上传到个人网站；QQ空间相册等也都可以。2、切换城市页面：(1)在首页使用navigateTo跳转到切换城市页面。由于首页没有关闭，所以在城市切换返回时，天气信息还是旧的。正确的处理逻辑如下：1）使用reLaunch跳转到切换城市页面，本质上是关闭所有页面，打开新页面。2）切换城市页面，将公共变量中的城市信息更新为手动切换的市区，然后switchTab回到首页，触发首页重新加载。3)增加首页获取城市信息时的判断。如果没有全局定位，则使用全局定位。(2)城市列表的滚动和返回顶部是基于scroll-view组件的scroll-top属性。初始值为0，滚动会增加；点击返回顶部，设置为0返回顶部3、地图服务页面(1)调用百度地图的各种服务，查询酒店、美食、生活服务。具体可以参考百度地图的文档（2）点击时给点击的图标添加边框，数据驱动视图，所以用一个长度为3的数组来保存三个图标当前是否是的状态点击，然后wxml根据数据动态添加类，添加边框样式。4.更多页面(1)小程序开放外链的功能只开放了公司和组织的小程序，但不能用于个人开发外链。(2)彩蛋页面，通过wx.setStorageSync('userInfos',userInfos)获取用户信息；可以获取登录小程序用户的个人信息，可以发送到后台存储到数据库中，方便用户分析。我这里只是存放在浏览器缓存中，最大应该是10M缓存；如果用户从小程序列表中删除这个小程序，缓存将被清除。五、发布说明(1)新版小程序发布限制为2M。一般图片占空间最多，所以尽量使用网络图片。具体如何将本地图片转换成网络图片，上面已经说明了。（2）如果在开发者工具上预览和测试没有问题，点击上传；网页版小程序个人中心左侧的“开发管理”菜单，第三块——开发版会有内容。（3）点击提交，填写小程序相关信息，提交审核。注意：分类最好填写准确，这样才能更快的通过审核。我的小程序用了一天半就审核通过上线了。至此，我把这两天开发中遇到的坑和注意点都说完了。据说坑比较多。待更深入的开发后，我会继续研究。.--------------------------------------写在最后--------------------------------------**我们开发的一套小程序+公众号商城，现已全面开放源码未加密开放，只为方便更多从事小程序开发的小伙伴。项目地址：https://github.crmeb.net/u/demo小程序页面展示公众号页面展示后台页面展示喜欢的话记得点个赞哦！**项目地址：https://github.crmeb.net/u/demo**
