评论

微信小程序讲解 我看到的文章感觉很有意义所以转载一下给大家

1.学会注册小程序帐号 2.安装小程序开发者工具 3.创建小程序项目 4.熟悉小程序目录结构 5.小程序hello world

一、本期要点:

1.学会注册小程序帐号
2.安装小程序开发者工具
3.创建小程序项目
4.熟悉小程序目录结构
5.小程序hello world


要点1:学会注册小程序帐号

打开:https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN


注册完登录小程序后台:开发-开发者设置--AppID(小程序ID) wxf4be8f9be8e111a2

要点2:下载并安装小程序开发者工具

下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

要点3.创建小程序项目

  打开安装好的微信web开发者工具,点击+创建小程序项目,添加项目名称,指定小程序目录和appid-->点击创建


4.熟悉小程序目录结构

   pages目录:是你平时干活的目录  相当于vue中的src
   utils目录:存放平时封装的一个工具目录 例如:封装ajax等

   app.js:小程序入口  相当于vue中的main.js
   app.json:小程序的全局配置
   app.wxss:是小程序的全局样式
   project.config.json 小程序项目的环境设置,通常不动


要点5.小程序hello world(创建页面)

  一个小程序页面包括的文件类型:

     以pages中的index目录为例:

       index.js:页面的js逻辑
       index.json:当前页面的配置
       inex.wxml:页面模板  相当于html
       index.wxss: 页面样式,相当于css

一、重温小程序如何创建页面

1.手动建立

2.批量建立:

右键pages->创建目录

右键在创建的目录->新建page->命名并回车

二、小程序数据绑定

通过在data:{}中添加数据,通过在wxml页面中添加{{ }}来绑定数据

绑定数据的形式:字符串,数值,数组

三、小程序数据遍历和判断

数组如何遍历:通过wx:for,通过item添加每一项,通过index添加索引

例如:





商品编号:{{ id+1 }}

商品名称:{{ item.name }}

商品价格:{{ item.price }}





四、小程序css选择器

小程序css选择器只能使用:class,id

一、重温小程序如何创建页面

1.手动建立
2.批量建立:

右键pages->创建目录
右键在创建的目录->新建page->命名并回车


二、小程序数据绑定

通过在data:{}中添加数据,通过在wxml页面中添加{{  }}来绑定数据

绑定数据的形式:字符串,数值,数组


三、小程序数据遍历和判断

数组如何遍历:通过wx:for,通过item添加每一项,通过index添加索引

例如:

  商品编号:{{ id+1 }}商品名称:{{ item.name }}商品价格:{{ item.price }}

 

 注:通过
      wx:for-index="要改的下标名称"
      wx:for-item="要改的项的名称"

   不改默认每一项的名称:item,
   不改默认每一项的索引:index


四、小程序css选择器

小程序css选择器只能使用:class,id,标签(例如:view,text),群组,:after,:before


五、条件渲染

小程序支持的条件渲染:wx:if,hidden 两种

  wx:if 相当于vue中v-if,满足则创建出来,不满足删除

  hidden 相当于vue中的v-show的取反


例如:

      //满足条件,渲染的内容  

    不满足条件显示的内容


五、小程序事件绑定

格式: <标签 bind事件类型="要触发的方法名">文本

例如:   点我


六、小程序页面如何传参

两种方式:

第一种:通过自定义属性传参 例如:data-自定义属性名="值"
第二种:通过路由跳转传参


七、小程序页面如何跳转

wx.navigateTo({
url: 'test?id=1'
..

注:如何动态改变小程序的标题(即title)

    第一种:手动修改
    第二种:用程序修改


八、小程序如何获取后台数据 ****************

后台返回格式:json

交互方式:

 1.js原生  XMLHttpRequest()
 2.jQuery: $.ajax({  }),$.get(),$.post(),$.getJSON()
 3.Vue: axios
 4.React: fetch
 5.微信小程序:wx.request({  })  和jQuery的$.ajax()类似

 注意:

    1.小程序通常不支持本地的JSON文件,通常放在线上的一个真实地址
    2.小程序线上接口地址必须是  https://xxxxx.como/api/goods.json


git网站静态化,可以像买了域名和空间的网站一样

 用git将本地代码
 先推送到线上gitee pages-启用

 配置小程序后台线上域名即白名单 


开发-服务器域名

request合法域名 :https://wxw666.gitee.io

1.小程序如何遍历

wx:for="{{ 要遍历的数组名 }}"

2.小程序如何实现条件渲染

wx:if,hidden

3.小程序如何绑定事件

点我

例如:点我

4.小程序如何跳转页面

wx.navigatorTo({

url:'要跳转的地址'

})

5.小程序两个页面之间如何传参

传参:通过自定义属性配合 wx.navigatorTo

接参:在另一个要接收的页面通过onLoad中的options来接收

=================================================================

本节要点:

1.再一次讨论页面跳转

2.小程序的钩子函数

3.小程序的UI组件

4.小程序的生态圈

一、再一次讨论页面跳转

跳转方式有两种:类似vue的两种方式

第一种:标签方式(navigator) 类似于vue-router中的router-link

第二种:js方式(有4个)

  **** wx.navigateTo(Object object)
   wx.switchTab(Object object)
   wx.redirectTo(Object object)
   wx.reLaunch(Object object)

二、小程序的钩子函数

三、小程序的UI组件

1.轮播组件:swiper

2.switch:开关

3.picker:普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器

一、小程序实现自定义组件

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程

第一步:创建一个components文件夹

  内部创建要复用的组件,例如:Dialog

  右键新建Dialog目录->右键新建component并生成四个文件


第二步:如何在其他页面引入刚才创建的Dialog组件

参考资料:

https://www.jianshu.com/p/8a2a730d9e60/

二、在小程序中如何mock数据

(一)在小程序中使用mock数据的步骤:

第一步:下载文件:mock.js,wxmock.js并引入到utils目录中

第二步:创建接口文件,即要请求的模拟数据接口 例如:user.js

在utils下创建一个user.js文件,生成要用的模拟数据,例如:

     //引入基于小程序的wxmock
     var Mock = require('../WxMock.js')

     //基于ajax请求地址的模拟数据

     //格式: Mock.mock('请求地址',数据模板)

     var users=Mock.mock('https://1608A.com/users', {
     "codeText":"成功返回",
     "code": 200,
     "data|1-20": [
        {
           "name": function () {
           return Mock.Random.cname()
           },
           "lastLogin": function () {
           return Mock.Random.datetime()
           }
        }
     ]
     })
     var del=Mock.mock('https://xxx.com/user/delete', {
     "code": 200,
     "message": "s删除成功"
     })

     //请求文章列表
     var article=Mock.mock('http://www.baidu.com/getArticle',{

        "code":666,
        "successText":"成功返回",
        "content":[
           {"id":1001,"name":"文章标题","content":"文章内容"},
           {"id":1002,"name":"文章标题222","content":"文章内容222"}
        ]

     })

     export default {
        users,
        del,
        article
     }


第三步:使用接口渲染数据(即:在需要请求的页面中用wx.request()来请求需要的数据)

     wx.request({
        url:'http://www.baidu.com/getArticle',
        success:function(res) {
              console.log('我在购物车页面我得到的数据:',res)
        }

     })


(二)如何生成mock数据

  1.生成序列

  Mock.mock({
  "number|+1": 202
  })


参考资料:
作者:刘松阳
链接:https://www.jianshu.com/p/bc3996c30d6c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
最后一次编辑于  2020-08-16  
点赞 0
收藏
评论
登录 后发表内容