作为小程序初学者，来记录一下这几天自己的学习成果，两个Demo，一个是美食菜谱，一个生活服务，用的都是开源接口
代码传到GitHub了,地址:https://github.com/LvXin1
另外附上几张效果图
image.png
image.png
image.png
image.png
image.png
image.png
image.png
1 、注册小程序账号
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1534489446
微信公众平台上都有详细介绍
2、下载开发工具
微信开发工具.png
学习怎么使用，微信公众平台上都有详细介绍
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=18080816
3、新建小程序项目
1）如果你没有完成开发设置，没有生成APPID，那么你在新建项目时可以不填APPID选择使用小程序测试号
新建项目.png
2）如果你已经完成开发设置，生成了APPID，那么可以直接复制。
APPID.png
4、项目构建
appJson.png
1）小程序整体项目公共配置在app.json文件里，各个页面单独的配置在自己的json文件里，app.json文件可以配置顶部浏览器功能条背景颜色，配置tab导航（位置可以放顶部也可以放底部）
注意:程序启动默认的第一个页面，就是app.json的pages中的第一个页面哦。
2)app.js整个项目的启动文件，onLaunch有三大功能 展示本地存储能力、登录、获取用户信息，另外还可以将页面公用信息存到app.js里某个对象上，然后再其他页面获取一个app实例 var app = getApp()，即可用app.**来调用。如果要使用util.js工具库中的某个方法，在util.js中module.exports导出，然后在需要的页面中require即可得到哦。
3）每个页面顶层的DOM都为page，若要固定页面大小为浏览器宽高。一定先为page标签添加样式。同样每个页面都由一个Page方法来渲染，他里面的data即为整个页面需要绑定的数据和vue，react类似。也有生命周期函数。
5.开发项目中自己遇到的问题
1）data数据只有用setData方法来更改时才会在页面上显示变化；
2）onLoad这个生命周期函树就可以接收到页面地址栏参数；
3）传参，事件传参只能通过在标签内为data开头属性赋值，如：data-id = “{{id}}”，然后再事件函数里用e.currentTarget.dataset.id 来获取；页面传参即在地址后面拼接即可。
4）class 样式动态添加，和VUE写法不一样，
一个类名的情况下<view class="{{selsectState[0]?'newsSelected':''}}" bindtap='clickNation'>
多个类名情况<view class="nav {{selsectState[0]?'newsSelected':''}}" bindtap='clickNation'>
5)CSS多行省略在微信小程序里平时的写法行不通，必须加整体高度来控制
//正常
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp:3;//控制行数
display: -webkit-box !important;
word-break: break-all;
-webkit-box-orient: vertical;
//微信
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
text-overflow:ellipsis;
height:126rpx;//必须加行高
6）scroll-view组件scroll-top等等的值单位都为px
且scroll-view标签样式white-space:nowrap,它的子元素display:inline-block;
7)页面上拉加载更多下拉刷新，不要用scroll-view来实现，要用页面配置来实现，"enablePullDownRefresh":true设置为true代表开启上拉加载下拉刷新功能，然后配合onPullDownRefresh（下拉加载）、onReachBottom（上拉刷新）两个方法来实现。（这个功能我在美食菜谱项目首页里面实现了）
上拉加载下拉刷新.png
8）使用wx.SwitchTab跳转tab页的话，在app.json中除了注册pages页面，还需要在tabBar中注册tab页，才能生效哦。
注意：tab最多5个，也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。
9）reLaunch跳转,新开的页面左上角是没有退回按钮的，生活圈项目天气页面切换城市的时候用到。
10)事件对象event，event.target和event.currentTarget的区别：
target指的是当前点击的组件 和currentTarget 指添加事件的组件。
6.发布上线
微信小程序要想发布，接口必须都为HTTPS请求，这就要求你在开发的时候选取的开源接口必须是https的，我一开始做了一个美食菜谱的小程序。里面用的聚合数据（https://www.juhe.cn/）的http开源接口，最后发布的时候发现必须是HTTPS请求，无奈又写了一个。你可以选择自己写造假接口，例如用Easy Mock(https://easy-mock.com/)或者YApi(https://yapi.ymfe.org/index.html),也可以像我一样找各种开源HTTPS接口，最后将你用到的的HTTPS接口配置在这里。
image.png
开发的时候如果没有配置你需要点击详情，将最底部不校验合法域名勾选
image.png
结尾:
现在只想到这么多，就不在记录了。也由于时间关系，这两个项目功能都不完整，代码书写欠缺，后续有时间了，我会补上并加以修正。
网友评论