作为小程序初学者，来记录一下这几天自己的学习成果，两个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

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

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

结尾:

现在只想到这么多，就不在记录了。也由于时间关系，这两个项目功能都不完整，代码书写欠缺，后续有时间了，我会补上并加以修正。