豆瓣电影评分(微信小程序)——Day1

陈平说，知己知彼，胸怀天下。
所以开发第一步，查看官方文档。了解到微信小程序是轻量级的应用，无需下载便可应用，但是正是因此优势，对代码有了更多的要求。
划重点：
考虑到包大小对用户体验的影响，平台限制单个代码包的大小上限为 2M。
emmmm？2M,一张图片就5M了，那么为了项目成功发布，需要将所有的素材放在服务器上，以接口的形式获取。

第一步：注册微信小程序

进入微信公众平台，注册新的小程序，这里就不赘述了，按要求填写相应的信息（姓名、手机号码、邮箱号等）即可，完成注册。

划重点：注册是请根据需求选择主体类型，企业才拥有微信认证、微信支付及高级接口能力，请按照具体的需求选择。

第二步：完成小程序相关设置，下载开发工具

注册完成后，扫码登录后台。首次登录需要完成相关信息的填写（小程序名称、小程序图标等），后期可更改。

划重点：开发—>开发设置 检查是否出现小程序ID，该ID非常重要，是识别小程序是否合法的标识。

下载最新版本的微信开发工具。下载地址
备注：由于微信开发工具版本更新较快，如以前下载过该程序，建议卸载后重新安装。

第三步：熟悉小程序目录结构

打开微信开发者工具，新建项目，选择小程序文件夹，填写小程序ID，进入开发者工具。
主界面

目录结构

utils文件夹存放工具类文件：
project.config.json：存放小程序项目配置信息，与vue中package.json文件类似。
app.wxss：全局css，存放页面中相同、需重复使用的css；
app.json：全局json配置，更改标题、颜色等；
app.js：全局js文件。
pages文件夹存放展示类文件：
该文件夹每一个文件夹包含如下文件

①**.wxml ===>.html**

• view ===> div
• text:长按选中功能
• image ===>img
• button
• input
• label
• switch
• map
  注意：标签一定要闭合

②**.wxss ===>.css**

微信小程序适配单位：rpx。

划重点：建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 375*667。可以根据屏幕宽度自适应。
布局：弹性盒布局

③**.js**（核心：数据驱动）

1. 数据 ：

    js中定义：
    data：{
    	 	str：“value值”
    }
    wxml 中访问：{{str}}
   

2. 列表渲染

   wx:for=’{{数组名}}’
   {{item}}可获取数组元素
   {{index}}获取下标

3. 条件渲染
   wx:if=‘条件’

4. 事件
   bind：不会阻止冒泡
   catch：会阻止冒泡
   bindtap = 函数名() [函数在js文件中定义]

未完待续……